حقل رقم الهوية

تجريبي

احصل على Ritla UI

حقل لرقم الهوية الوطنية السعودية والإقامة والهوية الإماراتية، مع نوع الهوية وتلميح بالطول وأول رقم، وخطأ يقول ما الخطأ.

افتح في Figma

المعاينة

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

التثبيت

أضف المكوّن
$ npx ritla add national-id-input
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/national-id-input
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

national-id-input.tsx

import { NationalIdInput } from "@/components/ui/national-id-input";<NationalIdInput name="idNumber" typeName="idType" onValueChange={(value, valid) => …} />

مرجع الخصائص

NationalIdInput

الخاصية	النوع	الافتراضي	الوصف
`types`	`("national-id" \| "iqama" \| "emirates-id")[]`	`["national-id", "iqama"]`	خاصية Type: الأنواع المعروضة؛ نوع واحد يخفي المبدّل.
`type / defaultType / onTypeChange`	`NationalIdType`	لا يوجد	النوع المختار.
`value / defaultValue / onValueChange`	`string, (value, valid) => void`	لا يوجد	الأرقام فقط، وهل الرقم صحيح.
`error`	`ReactNode`	لا يوجد	خطؤك أنت (من الخادم)؛ وإلا يُفحص الرقم عند مغادرة الحقل.
`isValidNationalId / formatNationalId / idDigits`	`functions`	لا يوجد	الفحص برقم التحقق، وتنسيق الهوية الإماراتية، والأرقام من لوحة عربية.

إمكانية الوصول

لوحة المفاتيح

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

المفتاح	ما يفعله
`ArrowRightArrowLeft`	بين أنواع الهوية. في العربية التالي ArrowLeft.

ARIA

المبدّل مجموعة اختيار مسمّاة «نوع الهوية».
التلميح والخطأ مرتبطان بالحقل، والخطأ يُعلن بأدب ولا يظهر قبل مغادرة الحقل.

ملاحظات العربية والاتجاه

ينعكس

التسمية والمبدّل والتلميح تنعكس.

لا ينعكس

الرقم من اليسار إلى اليمين دائمًا، والصف كله كذلك، كحقل الهاتف.

الأرقام: الأرقام العربية المكتوبة بلوحة عربية تُقبل وتُحوّل إلى غربية.
الخط العربي: ‏label-16 للرقم وlabel-12 للتلميح.