کد تأیید (OTP)

import { OtpInput } from "@kashi-ui/react";

نمونه

کد آزمایشی 123456 را تایپ کنید، یا کد را کپی کنید و بچسبانید.

<OtpInput
label="کد ارسال‌شده به ۰۹۱۲ ••• ۶۷۸۹"
length={6}
groupAfter={3}
onComplete={(code) => verify(code)}
/>

چرا یک input؟

بیشتر پیاده‌سازی‌های OTP شش فیلد جدا دارند که چسباندن، پاک کردن و صفحه‌خوان را خراب می‌کند. کاشی یک input واقعی زیر خانه‌های نمایشی دارد، پس:

• پر شدن خودکار: با autocomplete="one-time-code"، iOS و Android کد پیامک دریافتی را بالای صفحه‌کلید پیشنهاد می‌دهند.
• چسباندن: «۱۲۳ ۴۵۶» یا «123-456» هم درست خوانده می‌شود؛ ارقام فارسی و فاصله‌ها پذیرفته می‌شوند.
• صفحه‌خوان: یک فیلد با یک برچسب می‌خواند، نه شش فیلد بی‌نام.
• پاک کردن و جابه‌جایی: Backspace، کلیدهای جهت‌دار و انتخاب متن همان رفتار عادی را دارند.

ویژگی‌ها