المكوّنات

رمز التحقق

خانات رمز لمرة واحدة، من 4 إلى 6. الكتابة تنتقل للخانة التالية، واللصق يملؤها كلها، والهاتف يقترح الرمز من الرسالة.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/input-otp

الاعتماديات التي يضيفها: @base-ui/react

import { InputOTP } from "@/components/ui/input-otp";

<InputOTP label="Verification code" onValueComplete={verify} />

length: ‏4 أو 5 أو 6. الخطأ يلوّن كل الخانات.

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		خاصية Label.
`length`	`4 \| 5 \| 6`	`6`	خاصيتا Show 5th وShow 6th.
`value / defaultValue`	`string`		الرمز بأرقام 0-9.
`onValueChange`	`(value: string) => void`		عند كل تغيير.
`onValueComplete`	`(value: string) => void`		عند امتلاء كل الخانات.
`autoSubmit`	`boolean`	`false`	إرسال النموذج عند اكتمال الرمز.
`required / helperText / error / disabled / readOnly / name`	`…`		كما في حقل الإدخال.

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`0-9`	يكتب الرقم وينتقل للخانة التالية.
`Backspace`	يمسح ويعود خانة.
`ArrowLeftArrowRight`	بين الخانات، بالاتجاه المرئي نفسه في العربية (الخانات من اليسار إلى اليمين).

الخانة الأولى تأخذ اسم التسمية، والباقية «الرقم 2 من 6» بلغة الصفحة.
autocomplete="one-time-code" وinputmode="numeric" للوحة أرقام واقتراح الرمز من الرسالة.

الخانات تُقرأ من اليسار إلى اليمين: الرقم الأول في الخانة اليسرى، كما يُكتب الرمز في الرسالة.

الأرقام: الأرقام العربية (٠-٩) والفارسية المكتوبة تُحفظ 0-9، فيعمل الرمز من لوحة مفاتيح عربية.
الخط العربي: label-16 في وسط كل خانة.