رمز تحقق
InputOTPحقل رمز تحقق لمرة واحدة في React لتسجيل الدخول والتحقق: رموز رسائل نصية من 6 خانات، تجميع الخانات، رقم سري مقنّع، لصق، تعبئة تلقائية، وonComplete.
يستقبل InputOTP رمزاً رقمياً (يتكون رمز الرسائل النصية في السعودية من 6 أرقام). تعمل التعبئة التلقائية من الرسائل النصية، اللصق، وBackspace، ويستدعي المكون onComplete عند امتلاء آخر خانة. تبقى الأرقام مرتبة من اليسار إلى اليمين في الصفحات العربية.
متى تستخدمه
استخدم InputOTP لرموز التحقق المرسلة عبر الرسائل النصية أو البريد الإلكتروني، ومنها الرموز المكونة من 6 خانات والشائعة في الخدمات السعودية. اضبط 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 | ||
form | string | Associates the input with a <form> by id, like the native form attribute. | |
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 خانة واحدة. ويملأ لصق الرمز كاملاً كل الخانات.
يملأ اللصق والتعبئة التلقائية من الرسائل النصية الخانات كلها. تبقى الأرقام مرتبة من اليسار إلى اليمين داخل الصفحات العربية.