جعبههای OTP
وضعیت
هدفِ normative — پیادهسازی نشده: ورودِ فعالِ وب فعلاً یک ورودی تکی otp
دارد (جزئیات زیر). ششخانهای فقط در پروتوتایپ است؛ پذیرش در
وضعیت پذیرش طراحی.
هدف
ورودی کد یکبارمصرف ۶رقمی: شش خانهٔ جدا با یک input نامرئی روی همه؛ ارقام فارسی، جهت چپبهراست، حالتهای پر/فعلی/غلط.
ساختار
<div class="otp-boxes">
<span class="box fill">۳</span> <!-- … ۶ خانه -->
<input class="otp-input" inputmode="numeric" maxlength="6">
</div>
input واقعی نامرئی روی خانهها نشسته و فوکوس/تایپ را مدیریت میکند؛ خانهها فقط نمایشاند.
گونهها و اندازهها
یک گونه: ۶ خانهٔ ~۴۴×۵۲ با گپ ۸؛ ارقام درشت (۲۰px/۷۰۰).
حالتها
| حالت | ظاهر |
|---|---|
| default | خانهٔ خالی با خط --border |
| fill | رقم واردشده — خط برند |
| cur | خانهٔ فعلی — هالهٔ برند |
| bad | کد غلط — قرمز + لرزش .shake |
| hover | خط --border-strong |
| focus-visible | هالهٔ برند روی input نامرئی (بهصورت cur) |
| active | همان فوکوس |
| disabled | کل گروه کمرنگ (در جریان ورود معنا ندارد) |
| loading | تأیید روی دکمه («تأیید و ورود») نه روی خانهها |
| success | کد پذیرفته میشود؛ خانهها سبز نمیشوند — جریان به تقویم میرود |
رفتار
- تایپ رقم → خانهٔ بعدی؛ Backspace روی خالی → خانهٔ قبل؛ Paste ششرقمی همه را پر میکند.
- ارقام فارسی نمایش داده میشود اما مقدار ارسالی لاتین است (
J.enهنگام ارسال).
کیبورد و دسترسپذیری
- یک input واقعی با
inputmode="numeric"،maxlength="6"وaria-label="کد یکبارمصرف"— خانههاaria-hidden. - خطای «کد غلط» با متن هم اعلام میشود (
role="alert")، نه فقط لرزش. - خانهها ≥۴۴px عرض؛ هدف لمسی خانهها خودشاناند چون ورودی رویشان است.
رفتار واکنشگرا
عرض کل گروه ≤ ۳۲۰px جا میشود (۶×۴۴ + گپها)؛ در compact وسطچین زیر شمارهٔ تلفن.
قواعد محتوا
- ✅ شمارهگیری دوباره بهصورت
.linkishبا شمارش معکوس («ارسال مجدد پس از ۵۹ ثانیه»). - ❌ بازکردن کیبورد حروف؛ شش خانهٔ قابلکلیک جدا (فوکوس باید در input بماند).
توکنها
خط خانه --border/--brand (fill) · خطا --holiday · هالهٔ برند · انیمیشن
.shake کوتاه با --ease.
پیادهسازی پلتفرمها
- وب: ورودی تکی —
LoginPage.tsxفیلدotpرا با اعتبارسنجی^\d{6}$میخواند (تست:LoginPage.test.tsx). ششخانهای هنگام بازطراحی ورود پیاده میشود. - اندروید: هنوز صفحهٔ ورودی در جریان فعال نیست؛ خانوادهٔ BaseTextField
(
textfields/) تبدیل ارقام را میدهد. .otp-boxesفقط درui-design/prototypes/assets/app.css(prototype-only).