فرم‌ها — فیلدهای ورودی TDS

فیلدهای فرم راه ورود داده از کاربر به برنامه‌اند. همه از می‌آیند، روی react-aria-components ساخته شده‌اند و با همان توکن‌ها و حالت‌ها کار می‌کنند: برچسب همیشه دیده می‌شود، خطا با آیکون و متن نشان داده می‌شود، و صدا و چاپ اختیاری است.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Input, Checkbox, RadioGroup, Radio, Switch, Select, Slider, DatePicker, FileUpload, CurrencyInput, CodeCells } from '@tokapps/tuk';

فیلدها

فیلد	کی استفاده کنیم	صفحه
Input	متن کوتاه یا بلند، ایمیل، تلفن، نشانی، گذرواژه، جستجو، عدد	Input
Checkbox	انتخاب مستقل یا چند گزینه؛ پذیرش قوانین	Checkbox
RadioGroup	انتخاب دقیقاً یک گزینه از چند گزینهٔ قابل‌دیدن	RadioGroup
Switch	تنظیمی که همان لحظه روشن یا خاموش می‌شود	Switch
Select	انتخاب یک گزینه از فهرست بلند یا ثابت	Select
Slider	انتخاب عدد یا بازه‌ای از اعداد با کشیدن	Slider
DatePicker	انتخاب تاریخ با تقویم شمسی یا میلادی	DatePicker
FileUpload	پیوست فایل با محدودیت نوع، حجم و تعداد	FileUpload
CurrencyInput	مبلغ پولی با نماد ارز و قالب محلی	CurrencyInput
PhoneInput	شماره همراه ایرانی با ماسک؛ خروجی فقط ارقام ()	PhoneInput
CodeCells	کد تأیید پیامکی یا کد جفت‌سازی با یک خانه برای هر رقم	CodeCells
Slug	نامک (اسلاگ) که هم‌زمان با تایپ یا از روی عنوان ساخته می‌شود و آزاد بودنش را از وب‌سرویس می‌پرسد	Slug
Repeater	فهرست ردیف‌های تکرارشونده از یک فرم (اعضای تیم، آدرس‌ها) با افزودن/حذف و اعتبارسنجی	Repeater

دکمه‌ها (Button، IconButton، SplitButton) فیلد نیستند و در دسته اکشن‌ها آمده‌اند.

کدام فیلد؟

نیاز	فیلد
یک خط متن آزاد	Input
چند خط متن آزاد	Input با
بله یا خیر، یا روشن/خاموش برای یک تنظیم	Checkbox یا Switch (Switch وقتی اثر فوری است)
یکی از ۲ تا ۵ گزینه که همه باید دیده شوند	RadioGroup
یکی از گزینه‌های بیشتر یا پویا	Select
عدد تقریبی در بازه	Slider
عدد دقیق یا مبلغ	Input با یا CurrencyInput
تاریخ	DatePicker
فایل	FileUpload
کد کوتاه با ارقام ثابت	CodeCells

قواعد مشترک

برچسب همیشه دیده شود. جایگزین برچسب نیست؛ با تایپ کاربر ناپدید می‌شود.
خطا فقط با و پیام. پیام خطا () فقط وقتی درست است نشان داده می‌شود. خطا با آیکون و متن است؛ رنگ تنها نشانه نیست.
وضعیت‌های یکسان. کدری و قفل، مقدار را نشان می‌دهد بی‌آنکه قابل تغییر باشد، یعنی در حال ذخیره یا بررسی.
نام برای فرم. پراپ را بدهید تا مقدار در باشد و با مرورگر یا فرم سرور کار کند.
صدا opt-in است. پیش‌فرض صدای است، بعد از تعامل صریح و با معادل بصری. در احراز هویت بگذارید.
چاپ. پیش‌فرض بیشتر فیلدها است؛ فایل‌ها پیش‌فرض دارند.
هدف لمسی ≥ ۴۴px و کنتراست AA در همهٔ تم‌ها.

فرم کامل

یک فرم نمونه با همهٔ فیلدها: الزامی‌ها، کرانه‌ها و ارسال با . داده‌های ارسال‌شده زیر فرم نشان داده می‌شود.

TSX

import { Input, Select, DatePicker, CurrencyInput, Slider, RadioGroup, Radio, Switch, Checkbox, Button } from '@tokapps/tuk';export function SignupForm() {  return (    <form      onSubmit={(e) => {        e.preventDefault();        const data = Object.fromEntries(new FormData(e.currentTarget));        save(data);      }}    >      <Input name="fullName" label="نام و نام خانوادگی" isRequired />      <Input name="email" type="email" label="ایمیل" isRequired />      <Select name="category" label="دسته‌بندی" isRequired options={[{ id: 'design', label: 'طراحی' }]} />      <DatePicker name="startDate" label="تاریخ شروع" />      <CurrencyInput name="amount" label="مبلغ هدف" currency="IRR" minValue={1000000} />      <Slider label="اولویت" defaultValue={2} minValue={1} maxValue={5} />      <RadioGroup name="plan" label="طرح" isRequired defaultValue="free">        <Radio value="free">رایگان</Radio>        <Radio value="pro">حرفه‌ای (Pro)</Radio>      </RadioGroup>      <Switch name="newsletter" defaultSelected>اعلان‌های ایمیلی</Switch>      <Checkbox name="terms" isRequired>قوانین و مقررات را می‌پذیرم</Checkbox>      <Button type="submit">ارسال</Button>    </form>  );}

چیدمان و دسترس‌پذیری

فیلدها را عمودی بچینید و برچسب را بالای فیلد بگذارید؛ حداکثر عرض فرم حدود ۳۶rem.
در موبایل فیلدها تمام‌عرض باشند و فاصلهٔ بین فیلدها از توکن‌های فاصله بیاید.
فرم را با در فیلد تک‌خطی بفرستید؛ دکمهٔ ارسال باید در پایان فرم و قابل‌لمس باشد.
بعد از ارسال ناموفق، اولین فیلد خطادار را فوکوس کنید و خلاصهٔ خطاها را بالای فرم نشان دهید.
هر فیلد را با مشخص کنید؛ برای صفحه‌خوان، برچسب و توضیح همیشه متصل‌اند.

RTL و چندزبانه

فیلدها با و منطق فاصله‌گذاری (/) در RTL درست می‌چینند. ایمیل، نشانی، تلفن، عدد و کد همیشه چپ‌به‌راست نوشته می‌شوند تا خوانا بمانند؛ مبلغ با ارز و لاتین می‌شود.

توکن‌ها

هر فیلد توکن‌های کامپوننتی خودش را دارد با پیشوند ، از فایل‌های . هیچ فیلدی مقدار خام رنگ یا اندازه ندارد؛ فقط توکن معنایی (مثل ، ، ) را مصرف می‌کند.

نکات

Textarea جدا نداریم: با همان است.
OTPInput جدا نداریم: با همان است.
Form wrapper جدا نداریم: با معمولی و HTML بومی کار می‌کنید؛ فیلدها با داده را می‌فرستند.