البناء · جديد
حقل كلمة المرور
حقل كلمة مرور بزر إظهار وإخفاء، ومؤشر قوة اختياري لإنشاء كلمة مرور جديدة.
المعاينة
المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.
npx shadcn@latest add @ritla/password-inputالاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react
الاستخدام
import { PasswordInput } from "@/components/ui/password-input";<PasswordInput label="Password" autoComplete="current-password" />
<PasswordInput label="New password" autoComplete="new-password" strength={score(value)} />أمثلة
القوة والحالات
strength: none وweak وfair وstrong. كنز لا يحسب القوة: مرّر نتيجة مقياسك. حقل تسجيل الدخول بلا مؤشر.
مرجع الخصائص
PasswordInput
يقبل كل خصائص <input> أيضًا ما عدا type.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | ReactNode | خاصية Label. | |
strength | "none" | "weak" | "fair" | "strong" | خاصيتا Show strength meter وStrength. بدونها لا يظهر المؤشر. | |
strengthLabels | Partial<Record<Strength, string>> | كلماتك للمؤشر. الافتراضي بلغة الصفحة. | |
required / helperText / error / disabled / readOnly | … | كما في حقل الإدخال. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | من الحقل إلى زر الإظهار. |
| EnterSpace | يُظهر كلمة المرور أو يخفيها. |
ARIA
- زر الإظهار اسمه «إظهار كلمة المرور» في الحالتين، و
aria-pressedيقول هل كلمة المرور ظاهرة. - المؤشر
role="meter"باسم «قوة كلمة المرور» وقيمة نصية («متوسطة»). - استخدم
autoComplete="current-password"لتسجيل الدخول و"new-password"للإنشاء، ليعمل مدير كلمات المرور.
ملاحظات العربية والاتجاه
ينعكس
- زر الإظهار في نهاية الحقل (اليسار).
- المؤشر يمتلئ من بداية السطر (اليمين)، وكلمته في نهايته.
لا ينعكس
- أيقونة العين لا تنعكس.
- الأرقام
- لا أرقام في الحقل نفسه.
- الخط العربي
- كلمة المؤشر
label-12بلغة الصفحة.