إدخال كلمة المرور

حقل إدخال نصي بأيقونة قفل وزر لإظهار القيمة أو إخفائها عند كتابة البيانات السرية. يوضح النص المساعد قاعدة كلمة المرور قبل الكتابة.

npx sdaia-ui@latest add password-input

الاستخدام

import { PasswordInput } from "@/components/ui/PasswordInput"

<PasswordInput label="Password" helperText="Use at least 8 characters." />

حقل فارغ يعرض النص التوضيحي وقاعدة كلمة المرور كنص مساعد.

جارٍ تحميل العرض التوضيحي: password-input-default

الحالة Visibility=Shown: زر العين يُظهر القيمة؛ ويُتحكَّم به هنا عبر visibility وonVisibilityChange.

جارٍ تحميل العرض التوضيحي: password-input-shown

القيمة لا تحقق القاعدة، والرسالة توضح طريقة الإصلاح. أضف أحرفًا لإزالتها.

جارٍ تحميل العرض التوضيحي: password-input-error

لا يمكن استخدام الحقل ولا زر الإظهار.

جارٍ تحميل العرض التوضيحي: password-input-disabled

التخطيط العربي: أيقونة القفل في البداية (اليمين) وزر الإظهار في النهاية (اليسار).

جارٍ تحميل العرض التوضيحي: password-input-rtl

الخاصية	النوع	القيمة الافتراضية	مطلوبة
label	string	—	اختيارية
placeholder	string	—	اختيارية
helperText	string	—	اختيارية
error	string	—	اختيارية
visibility	"hidden" \| "shown"	—	اختيارية
defaultVisibility	"hidden" \| "shown"	"hidden"	اختيارية
onVisibilityChange	(visibility) => void	—	اختيارية
autoComplete	string	"current-password"	اختيارية
labels	Partial<PasswordInputLabels>	—	اختيارية
disabled	boolean	false	اختيارية
required	boolean	false	اختيارية
size	"medium" \| "large"	responsive	اختيارية
dir	"ltr" \| "rtl"	—	اختيارية
value / onChange / …	InputHTMLAttributes	—	اختيارية

تسمية مرئية <label for> تسمّي الحقل؛ ويُربط النص المساعد ورسالة الخطأ عبر aria-describedby، ويضبط الخطأ aria-invalid ويُعلَن عنه (role="alert").
زر العين <button aria-pressed> منفصل باسم «إظهار كلمة المرور» (عبر labels.toggle) بمساحة نقر 24 × 24 بكسل، ولا يوضع داخل عنصر تفاعلي آخر.
لا يُمنع اللصق أبدًا. وعند إظهار كلمة المرور يتوقف التدقيق الإملائي والتصحيح التلقائي.
اضبط autoComplete على "current-password" لتسجيل الدخول أو "new-password" للإنشاء والتغيير لتعمل مديرات كلمات المرور.
يظهر التركيز كحدّ بعرض 2px بلون Border/border-brand، ولزر الإظهار حلقة تركيز خاصة.

الحقل مرن: يملأ الحاوية (fullWidth) ولا يفرض عرضًا أدنى.
الحجم غير المعيَّن يتبع حقل الإدخال النصي: متوسط تحت 768px وكبير من 768px (الحقل في Figma كبير).
المسافات والخطوط تستخدم رموز التصميم المتجاوبة دون نقاط توقف خاصة بالمكوّن.