فیلد ورودی
وضعیت
هدفِ normative. وب فرمهای واقعی دارد اما با مارکآپ ad hoc؛ پذیرش در
وضعیت پذیرش طراحی. کلاس .field prototype-only.
هدف
خانوادهٔ سهتایی ورودی متن (input)، ا نتخابی (select) و چندخطی (textarea) —
با لیبل بالای فیلد و خطای زیر آن؛ واحدِ فرمهای دیالوگ.
ساختار
<label class="field">
<span class="label">عنوان رویداد</span>
<input class="input" />
<span class="err">…</span>
</label>
لیبل همیشه بیرون فیلد (نه داخل آن بهعنوان placeholder).
گونهها و اندازهها
| گونه | کاربرد |
|---|---|
| input متن | عنوان، مکان، شمارهٔ همراه |
| select | انتخاب از فهرست کوتاه (تقویم، نوع) |
| textarea | یادداشت — حداقل ۸۸px ارتفاع |
input عددی .ltr | تلفن/کد — direction: ltr و ارقام همعرض |
ارتفاع کنترل ۴۲px · لیبل ۱۳px/۶۰۰ --muted · placeholder مثال واقعی، نه دستور
(«مثلاً: جلسه تیم فنی»).
حالتها
| حالت | ظاهر |
|---|---|
| default | پسزمینه --surface-1، خط --border |
| hover | خط --border-strong |
| focus-visible | خط برند + هالهٔ ۳px با ۱۴٪ شفافیت |
| active | همان فوکوس (تایپ جریان دارد) |
| disabled | کمرنگ + disabled بومی |
| loading | خود فیلد ندارد؛ دکمهٔ فرم اسپینر میگیرد |
| error | کلاس .invalid + متن .err — هرگز فقط قرمز بدون متن |
| success | علامت سبز گوشه ندارد؛ اعتبار با فعالشدن CTA اعلام میشود |
رفتار
- اعتبارسنجی زنده اما بیسروصدا: خطا بعد از اولین تعامل ظاهر میشود، نه حین تایپ اول.
- ورودی عددی ارقام فارسی را میپذیرد و هنگام خواندن به لاتین نرمال میکند (
J.en).
کیبورد و دسترسپذیری
- لیبل با
<label>به کنترل وصل است — نامِ دسترسپذیر خودکار. aria-invalid="true"هنگام خطا + پیام خطا متنی.inputmode="numeric"برای تلفن/OTP؛ فوکوس برنامهای فقط هنگام بازشدن فرم (روی اولین فیلد).
رفتار واکنشگرا
فرمها همیشه تکستونه؛ فیلد تمامعرض دیالوگ/برگه میگیرد (۳۲۰px هم جا میشود). فقط جفتِ شروع/پایان در یک سطر گرید ۲تایی — آن هم رفتار انتخابگر تاریخ و ساعت است.
قواعد محتوا
- ✅ پیام خطا علت + راهحل: «پایان نمیتواند قبل از شروع باشد».
- ❌ placeholder بهجای لیبل؛ خطای «مقدار نامعتبر» بدون توضیح.
توکنها
--surface-1 · --border/--border-strong · --brand (فوکوس) · --holiday
(خطا) · شعاع ۱۰.
پیادهسازی پلتفرمها
- وب: مارکآپ ad hoc در فرمها — مرجع:
EventModal.tsxوLoginPage.tsx. - اندروید: خانوادهٔ BaseTextField —
textfields/(شامل تبدیل ارقام فارسی/لاتین). .fieldفقط درui-design/prototypes/assets/app.css(prototype-only).