otp-input-kit

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

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

التثبيت

📦 NPM

npm install otp-input-kit

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

import OTPInput from 'otp-input-kit';
// لا داعي لاستيراد ملف CSS بشكل منفصل — يتم حقنه تلقائياً! 🚀

🌐 CDN (UMD)

<script src="https://unpkg.com/otp-input-kit/dist/otp-input.umd.min.js"></script>

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

const otp = OTPInput.create('#container', { ... });

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

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

🚀 JavaScript API

// 1. Container
<div id="otp-container" dir="rtl"></div>

// 2. Initialize
<script>
  const otp = OTPInput.create('#otp-container', {
    length: 6,
    direction: 'rtl',
    locale: 'ar'
  });
</script>

🧩 Web Component

<!-- 1. Declare element -->
<otp-input length="6" direction="rtl" locale="ar"></otp-input>

<!-- 2. Listen for events -->
<script>
  const el = document.querySelector('otp-input');
  el.addEventListener('otp-complete', (e) => {
    console.log('OTP:', e.detail);
  });
</script>

🔢 رمز التحقق الأساسي — ٦ أرقام

تركيز تلقائي، لصق ذكي، التنقل بالأرقام العربية-الهندية من اليمين لليسار

أدخل رمز التحقق المكوّن من ٦ أرقام

OTPInput.create('#otp', {
  length: 6,
  direction: 'rtl',
  locale: 'ar',
  nativeNumerals: true,   // ٠١٢٣٤٥٦٧٨٩
  onComplete: (v) => verify(v),
});

➖ الفاصل بين مجموعات الأرقام

فاصل مرئي بين مجموعتين من الأرقام — ٣ + ٣

أدخل الرمز

OTPInput.create('#otp', {
  length: 6,
  direction: 'rtl',
  locale: 'ar',
  nativeNumerals: true,
  separator: { char: '—', after: [3] },
});

🔤 أنواع الإدخال

رقمي · أبجدي · أبجدي-رقمي · سداسي عشري

رقمي بالأرقام العربية-الهندية

أبجدي (حروف إنجليزية)

سداسي عشري

// أبجدي-رقمي
OTPInput.create('#otp', { length: 6, type: 'alphanumeric', direction: 'rtl' });

// سداسي عشري
OTPInput.create('#otp', { length: 8, type: 'hex', direction: 'rtl' });

🔒 الوضع الآمن (مُقنَّع)

الإدخال مخفي كحقل كلمة مرور — يمنع التجسس البصري

أدخل رمز PIN (مُقنَّع)

OTPInput.create('#otp', {
  length: 4,
  secure: true,
  direction: 'rtl',
  locale: 'ar',
});

⏱ مؤقت العد التنازلي + إعادة الإرسال

يعرض الوقت المتبقي ويتيح إعادة إرسال الرمز بعد انتهاء مهلة

أدخل الرمز خلال ٣٠ ثانية

OTPInput.create('#otp', {
  length: 6,
  direction: 'rtl',
  locale: 'ar',
  nativeNumerals: true,
  timer: {
    enabled: true,
    duration: 30,
    showProgress: true,
    onExpire: () => showError('انتهت صلاحية الرمز'),
  },
  resend: {
    enabled: true,
    cooldown: 30,
    label: 'إعادة الإرسال',
    onResend: () => sendCode(),
  },
});

المظاهر

default

underline

rounded

pill

soft

neon

gradient

elevated

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

🔔 إشعارات تلقائية عند الإكمال أو الخطأ

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

OTPInput.create('#otp', {
  length: 6,
  direction: 'rtl',
  locale: 'ar',
  nativeNumerals: true,
  theme: 'soft',
  toast: {
    enabled: true,
    theme: 'minimal',
    position: 'top-left',   // يسار الشاشة لـ RTL
    successMessage: 'تم التحقق بنجاح!',
    errorMessage: 'رمز غير صالح، حاول مجدداً.',
  },
});

Web Component — RTL

🧩 مكوّن الويب بدعم RTL الكامل

استخدم <otp-input> مباشرة في HTML مع دعم RTL والأرقام العربية

في انتظار إدخال رمز التحقق…

<otp-input
  length="6"
  direction="rtl"
  locale="ar"
  native-numerals
  theme="rounded"
></otp-input>