رمز تحقّق
InputOTPحقل رمز تحقّق لمرّة واحدة في React لتدفّقات الدخول والتحقّق: رموز الرسائل النصّية من ست خانات، وتجميع، ورقم سرّي مقنّع، ولصق، وتعبئة تلقائية، وonComplete.
يدخل InputOTP رمزًا رقميًا (رمز الرسائل في السعودية 6 أرقام). التعبئة التلقائية واللصق والمسح تعمل جميعًا، ويستدعى onComplete عند اكتمال الخانات. تبقى الأرقام من اليسار إلى اليمين في العربية.
متى تستخدمه
استخدم InputOTP لرموز التحقّق المرسلة عبر الرسائل النصّية أو البريد، ومنها الرموز ذات الست خانات الشائعة في الخدمات السعودية. اضبط length ليطابق الرمز، وجمّع الخانات لسهولة القراءة، واستخدم الوضع المقنّع للأرقام السرّية. نفّذ التحقّق من onComplete حتى لا يحتاج المستخدم إلى زر إرسال منفصل.
لكلمات المرور استخدم TextInput بنوع password.
أمثلة
الخصائص
الخصائص التي يعرّفها InputOTP. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
length | number | Number of slots. Defaults to 6 (Saudi SMS OTP length). | |
groupSizes | number[] | Optional visual grouping; must sum to length. Default: one group. | |
value | string | Controlled value (the entered characters). | |
defaultValue | string | Uncontrolled initial value. | |
onChange | (value: string) => void | ||
onComplete | (value: string) => void | Fires when all length slots are filled. | |
pattern | string | Full-string regex the entered value must match. Defaults to digits-only. | |
mask | boolean | Render dots instead of characters (PIN entry). | |
separator | react.ReactNode | Override the divider rendered between groups. | |
disabled | boolean | ||
autoFocus | boolean | ||
name | string | ||
required | boolean | ||
label | react.ReactNode | Visible field label, auto-associated to the input via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the field when invalid. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. |
إمكانية الوصول
كل خانة حقل بتسمية، وتحمل المجموعة تسمية الحقل والنص المساعد والخطأ بالربط نفسه في TextInput. تتقدّم الكتابة تلقائيًا، ويرجع Backspace خانة، ويملأ لصق الرمز الكامل كل الخانات.
تعمل التعبئة التلقائية من الرسائل النصّية واللصق معًا. تبقى الأرقام بترتيب من اليسار إلى اليمين داخل الصفحات العربية.