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,
  revealToggle: true,   // زر 👁 لكشف الرمز
  direction: 'rtl',
  locale: 'ar',
});

🔐 قفل المحاولات

يُقفل الإدخال بعد محاولات خاطئة كثيرة مع عدّاد تنازلي. هنا: ٣ محاولات خاطئة ← قفل لمدة ١٠ ثوانٍ. الرمز الصحيح هو ٤٢٤٢.

أدخل ٤٢٤٢ (صحيح) أو أي رمز آخر لاستهلاك محاولة

OTPInput.create('#otp', {
  length: 4, direction: 'rtl', locale: 'ar',
  onVerify: (code) => code === '4242',
  lockout: { enabled: true, maxAttempts: 3, duration: 10 },
});

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

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

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

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: 'رمز غير صالح، حاول مجدداً.',
  },
});

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

🔢 لوحة أرقام افتراضية مدمجة

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

اضغط لوحة المفاتيح لإدخال الرمز

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

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

🎉 حركات نجاح + قصاصات ورقية

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

أدخل ٢٠٢٤ للاحتفال 🎉

OTPInput.create('#otp', {
  length: 4, direction: 'rtl', locale: 'ar',
  animation: { success: 'bounce', confetti: true },
  onVerify: (code) => code === '2000',
});

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

⭕ عدّاد دائري + 🔊 تغذية صوتية

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

أدخل الرمز — استمع لنغمات المفاتيح والنجاح

OTPInput.create('#otp', {
  length: 6, direction: 'rtl', locale: 'ar',
  timer: { enabled: true, duration: 30, style: 'ring' },
  sound: { enabled: true },
});

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

⏳ onVerify — تحميل ← نجاح / خطأ

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

أدخل الرمز — جرّب ١٢٣٤٥٦ (صحيح) أو أي رمز آخر

OTPInput.create('#otp', {
  length: 6, direction: 'rtl', locale: 'ar',
  onVerify: async (code) => (await api.verify(code)).ok,
  onVerified: (code) => goHome(),
  onFailed:   (msg)  => showError(msg),
});

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

💥 ثمانية أنماط لحركة الخطأ

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

OTPInput.create('#otp', { animation: { error: 'pulse' } });
// shake · highlight · both · pulse · buzz · bounce · glow · wobble · false

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

⚛️ React · 🟢 Vue · 🧡 Svelte · 🅰️ Angular

غلافات جاهزة حول نفس النواة — ثبّت الحزمة مرة واحدة، ثم استورد المحوّل المناسب لإطار عملك.

// React
import { OtpInput } from 'otp-input-kit/react';
<OtpInput length={6} onVerify={verify} onVerified={goHome} />

// Vue 3
import { OtpInput } from 'otp-input-kit/vue';
<OtpInput :length="6" :on-verify="verify" @verified="goHome" />

// Svelte
import { otp } from 'otp-input-kit/svelte';
<div use:otp={{ length: 6, onVerify }} on:verified={goHome} />

// Angular
import { OtpInputDirective } from 'otp-input-kit/angular';
<div otpInput [length]="6" [onVerify]="verify" (verified)="goHome()"></div>

Web Component — RTL

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

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

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

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