إدخال OTP

حقل رمز لمرة واحدة: ستة مربعات، رقم واحد لكل منها. يبدو كستة حقول إدخال ويتصرف كقيمة واحدة - الكتابة تتقدم للأمام، Backspace يرجع للخلف، الأسهم تتنقل دون تحرير، والرمز الملصق أو المملوء تلقائيًا يتوزع على المربعات.

التثبيت

يمكنك إضافة حقل إدخال OTP هذا باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add input-otp

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

القيمة المتحكَّم بها

القيمة عبارة عن سلسلة نصية واحدة، وليست مصفوفة من الأحرف. مرّر القيمة + onChange للتحكم فيه، أو defaultValue لتركه غير متحكم به. onComplete يُطلَق لحظة امتلاء آخر خانة، وهو عادةً المكان الذي تُرسل فيه النموذج.

const [code, setCode] = useState("");
<InputOtp  value={code}  onChange={setCode}  onComplete={(value) => verify(value)}  aria-label="Verification code"/>

الطول والتجميع والحالات

length يضبط عدد الصناديق و groupEvery يقسّمها إلى مقاطع، مما يجعل الشيفرة الطويلة أسهل في القراءة. isInvalid يمنح الصناديق حافة حمراء فوق نفس الظل لحالة فشل إدخال يستخدم.

{/* Four boxes instead of six */}<InputOtp length={4} aria-label="PIN" />
{/* Split into groups: 000 000 */}<InputOtp groupEvery={3} aria-label="Verification code" />
{/* States */}<InputOtp isInvalid aria-label="Verification code" /><InputOtp isDisabled defaultValue="1234" aria-label="Verification code" />

اللصق والتعبئة التلقائية

يؤدي اللصق في أي خانة إلى توزيع الأرقام من تلك النقطة فصاعدًا بدلًا من الاحتفاظ بالحرف الأول فقط. يعالج المسار ذاته التعبئة التلقائية لنظام التشغيل: يُسلّم iOS وChrome الرمز كاملًا في خانة واحدة، فتحمل كل خانة autoComplete="one-time-code" ويقبل أكثر من حرف واحد. يتم حذف غير الأرقام طوال الوقت، وتستخدم الصناديق inputMode="numeric" حتى تعرض الهواتف لوحة أرقام بدون أسهم وأحرف زائدة number الإدخال سيجلبه.