إدخال رمز التحقق

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

npx sdaia-ui@latest add otp-input

الاستخدام

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

<OtpInput length={6} label="Verification code" onComplete={verify} />

أربعة مربعات فارغة مع نص مساعد وإجراء إعادة الإرسال.

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

الطول 6 للرموز المكوّنة من ستة أرقام. الصق رمزًا لتعبئة كل المربعات.

جارٍ تحميل العرض التوضيحي: otp-input-six-digits

تم إدخال جميع الأرقام.

جارٍ تحميل العرض التوضيحي: otp-input-filled

الرمز غير صحيح: تتلون المربعات بالأحمر وتوضح الرسالة ما يجب فعله.

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

لا يمكن استخدام المربعات ولا إجراء إعادة الإرسال.

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

تنعكس التسميات وتبقى الأرقام من اليسار إلى اليمين.

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

يتحقق onComplete من الرمز، وتبدأ إعادة الإرسال فترة انتظار 30 ثانية عبر resendDisabled.

جارٍ تحميل العرض التوضيحي: otp-input-verify

الخاصية	النوع	القيمة الافتراضية	مطلوبة
length	4 \| 6	4	اختيارية
value	string	—	اختيارية
defaultValue	string	""	اختيارية
onChange	(value: string) => void	—	اختيارية
onComplete	(value: string) => void	—	اختيارية
label	string	—	اختيارية
helperText	string	—	اختيارية
error	string	—	اختيارية
disabled	boolean	false	اختيارية
resendQuestion	string	—	اختيارية
onResend	() => void	—	اختيارية
resendHref	string	—	اختيارية
resendDisabled	boolean	false	اختيارية
name	string	—	اختيارية
autoFocus	boolean	false	اختيارية
labels	Partial<OtpInputLabels>	—	اختيارية
dir	"ltr" \| "rtl"	—	اختيارية

مجموعة واحدة (role="group") تسمّيها التسمية؛ وكل مربع حقل باسم «الرقم 1 من 6» (عبر labels.digit).
يفتح inputmode="numeric" لوحة الأرقام، ويسمح autocomplete="one-time-code" على المربع الأول بتعبئة الرمز من الرسالة النصية.
الكتابة تنقل إلى المربع التالي، وBackspace يمسح ويعود للخلف، وتنقل الأسهم يسار/يمين وHome وEnd بين المربعات، واللصق يملأ كل المربعات. تُتجاهل الحروف.
يضبط الخطأ aria-invalid على كل مربع ويُربط عبر aria-describedby ويُعلَن عنه (role="alert").
تبقى الأرقام من اليسار إلى اليمين حتى في العربية، فالسهم الأيسر يعني دائمًا المربع السابق.
إعادة الإرسال زر حقيقي (أو رابط عبر resendHref) بمساحة نقر 24 بكسل، ويعطّله resendDisabled أثناء فترة الانتظار.

كل مربع 48 × 56 بكسل؛ ستة مربعات مع الفواصل تشغل 328 بكسل، وتتسع لهاتف بعرض 360 بكسل مع هوامش 16 بكسل.
في الحاويات الأضيق تتقلص المربعات بدلًا من تجاوز العرض، ويلتف سطر إعادة الإرسال.
حجم الأرقام يتبع رمز Display xs المتجاوب.