otp-input-kit

مكتبة إدخال رمز التحقق — قابلة للتخصيص الكامل، تدعم RTL والعربية بشكل أصيل، بدون أي اعتمادية خارجية.

بدون اعتماديات دعم RTL كامل إمكانية الوصول WCAG 2.1 Web Component الوضع المظلم الأرقام العربية-الهندية

التثبيت

📦 NPM

استيراد في مشروعك:

🌐 CDN (UMD)

ثم استخدم المتغير العام:

طريقة الاستخدام

اختر الطريقة التي تفضلها لدمج المكتبة في مشروعك.

🚀 JavaScript API

🧩 Web Component

🔢 رمز التحقق الأساسي — ٦ أرقام
تركيز تلقائي، لصق ذكي، التنقل بالأرقام العربية-الهندية من اليمين لليسار
أدخل رمز التحقق المكوّن من ٦ أرقام
➖ الفاصل بين مجموعات الأرقام
فاصل مرئي بين مجموعتين من الأرقام — ٣ + ٣
أدخل الرمز
🔤 أنواع الإدخال
رقمي · أبجدي · أبجدي-رقمي · سداسي عشري
رقمي بالأرقام العربية-الهندية
أبجدي (حروف إنجليزية)
سداسي عشري
🔒 الوضع الآمن (مُقنَّع)
الإدخال مخفي كحقل كلمة مرور — يمنع التجسس البصري
أدخل رمز PIN (مُقنَّع)
🔐 قفل المحاولات
يُقفل الإدخال بعد محاولات خاطئة كثيرة مع عدّاد تنازلي. هنا: ٣ محاولات خاطئة ← قفل لمدة ١٠ ثوانٍ. الرمز الصحيح هو ٤٢٤٢.
أدخل ٤٢٤٢ (صحيح) أو أي رمز آخر لاستهلاك محاولة
⏱ مؤقت العد التنازلي + إعادة الإرسال
يعرض الوقت المتبقي ويتيح إعادة إرسال الرمز بعد انتهاء مهلة
أدخل الرمز خلال ٣٠ ثانية

المظاهر

default
underline
rounded
pill
soft
neon
gradient
elevated

الإشعارات (Toast)

🔔 إشعارات تلقائية عند الإكمال أو الخطأ
تظهر إشعارات Toast تلقائياً عند إكمال الرمز أو حدوث خطأ أو انتهاء المهلة

لوحة مفاتيح على الشاشة

🔢 لوحة أرقام افتراضية مدمجة
لوحة مفاتيح اختيارية على الشاشة — مثالية للجوال والأكشاك وإدخال رمز PIN دون الاعتماد على لوحة مفاتيح النظام.
اضغط لوحة المفاتيح لإدخال الرمز

احتفال النجاح

🎉 حركات نجاح + قصاصات ورقية
مقابل حركات الخطأ — للنجاح. اختر نمط نجاح وأطلق القصاصات عند التحقق. الرمز الصحيح هو ٢٠٢٤.
أدخل ٢٠٢٤ للاحتفال 🎉

مؤقت دائري + صوت

⭕ عدّاد دائري + 🔊 تغذية صوتية
نمط مؤقت دائري، مع نغمات Web Audio خفيفة عند الضغط والنجاح والخطأ — دون ملفات صوتية.
أدخل الرمز — استمع لنغمات المفاتيح والنجاح

التحقق غير المتزامن

⏳ onVerify — تحميل ← نجاح / خطأ
مرِّر دالة onVerify فيعرض المكوّن مؤشّر تحميل، وينتظر الخادم، ثم ينتقل تلقائياً إلى حالة نجاح أو خطأ. الرمز الصحيح هنا هو ١٢٣٤٥٦ (مع تأخير شبكة محاكى ١٫٢ ثانية).
أدخل الرمز — جرّب ١٢٣٤٥٦ (صحيح) أو أي رمز آخر

أنماط حركة الخطأ

💥 ثمانية أنماط لحركة الخطأ
اضغط أي زر لمعاينة الحركة. تُطبَّق على كل الخلايا عند فشل التحقق.

محوّلات أطر العمل

⚛️ React · 🟢 Vue · 🧡 Svelte · 🅰️ Angular
غلافات جاهزة حول نفس النواة — ثبّت الحزمة مرة واحدة، ثم استورد المحوّل المناسب لإطار عملك.

Web Component — RTL

🧩 مكوّن الويب بدعم RTL الكامل
استخدم <otp-input> مباشرة في HTML مع دعم RTL والأرقام العربية
في انتظار إدخال رمز التحقق…