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 تلقائياً عند إكمال الرمز أو حدوث خطأ أو انتهاء المهلة

Web Component — RTL

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