ورودی OTP (InputOTP)
فیلد ورودی کد یکبار مصرف
معرفی
کامپوننت InputOTP برای ورود کدهای یکبار مصرف (OTP) استفاده می‌شود. بر پایه کتابخانه input-otp ساخته شده و از RTL پشتیبانی می‌کند.
چه زمانی استفاده کنیم:
- برای ورود کدهای تأیید پیامکی یا ایمیلی
- برای احراز هویت دو مرحله‌ای (2FA)
- وقتی نیاز به ورود کد عددی کوتاه (4 تا 8 رقم) دارید
چه زمانی استفاده نکنیم:
- برای ورودی‌های غیر عددی — Input-OTP برای کدهای عددی است
- برای کدهای طولانی‌تر از 8 رقم — از
Inputاستفاده کنید
زمین بازی
با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.
زمین بازی
تنظیمات
ظاهر
کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.
استفاده
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@partodata/ui'
export default function MyComponent() {
return (
<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
)
}با جداکننده (Separator)
برای تقسیم کد به دو گروه:
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@partodata/ui'
;<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>کنترل شده
const [value, setValue] = React.useState('')
;<InputOTP maxLength={6} value={value} onChange={setValue}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>حالت غیرفعال
<InputOTP maxLength={6} disabled>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>حالت خطا
aria-invalid را به InputOTP بدهید — روی input مخفی زیرین قرار می‌گیرد (برای صفحه‌خوان) و
حاشیه/رینگ خطا را روی همه‌ی slotها فعال می‌کند:
<InputOTP maxLength={6} aria-invalid="true">
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>اندازه
با size می‌توانید اندازه‌ی همه‌ی slotها را یکجا تغییر دهید (پیش‌فرض md، 38 پیکسل، مثل فیلدهای فرم):
<InputOTP maxLength={4} size="lg">
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
</InputOTPGroup>
</InputOTP>Props
InputOTP
InputOTPGroup
گروه‌بندی slotها در کنار هم.
InputOTPSlot
InputOTPSeparator
جداکننده بصری بین گروه‌های slot. به‌صورت پیش‌فرض آیکون نقطه (· / Dot) نمایش می‌دهد.
حالت‌ها و انواع
بدون جداکننده
تمام slot ها در یک گروه واحد.
با جداکننده
تقسیم slot ها به دو یا چند گروه با InputOTPSeparator.
حالت کنترل‌شده
با value و onChange مقدار را کنترل کنید.
حالت غیرفعال
با disabled تمام slot ها غیرفعال می‌شوند.
راهنمای استفاده
بکنید
- از
InputOTPSeparatorبرای تقسیم کدهای طولانی (مثلاً 6 رقمی) به دو گروه 3 تایی استفاده کنید -dir="ltr"را برای کدهای عددی حفظ کنید تا ترتیب ورود صحیح باشد - از حالت کنترل‌شده (value+onChange) استفاده کنید تا بتوانید اعتبارسنجی انجام دهید - وقتی کد وارد‌شده نامعتبر است،aria-invalid="true"بدهید تا بازخورد بصری و صفحه‌خوان هر دو فعال شوند
نکنید
- از InputOTP برای ورودی‌های طولانی‌تر از 8 رقم استفاده نکنید —
Inputمناسب‌تر است -dir="rtl"را برای کدهای عددی تنظیم نکنید — ترتیب ارقام معکوس می‌شود - بدون بازخورد بصری (مانندaria-invalidهنگام خطا) از OTP استفاده نکنید
دسترسی‌پذیری
- ناوبری خودکار بین slot ها با تایپ کاراکتر
- پشتیبانی از Paste کد یکبار مصرف
- با
disabledکل input غیرفعال می‌شود - فوکوس و مقدار روی یک input مخفی زیرین (کتابخانه
input-otp) قرار دارد، نه روی تک‌تک slot ها؛ اما آن input هیچ برچسبی برای خودش نمی‌سازد - به همین دلیل کامپوننت به‌صورت پیش‌فرض نام دسترسی‌پذیر «کد یکبار مصرف» را روی همان input می‌گذارد؛ برای متن دیگر
aria-labelبدهید، و اگر برچسب قابل مشاهده دارید باaria-labelledbyبه آن وصل کنید (در این حالت پیش‌فرض حذف می‌شود) - پشتیبانی از Backspace برای بازگشت به slot قبلی