نمای کلی فرم و ورودی

ورودی‌ها، انتخابگرها، تاریخ، فرم و فیلتر

این دسته را در ویترین، زنده و کنار هم ببینید
ورودی (Input)کامپوننت ورودی برای دریافت داده از کاربر
ورودی عدد بومی (NumberInputLocale)ورودی عددی بومی‌ساز — ارقام فارسی، عربی یا لاتین را می‌پذیرد، ارقام فارسی را با قابلیت ss01 قلم نمایش می‌دهد و همیشه یک عدد جاوااسکریپتی تمیز به فرم تحویل می‌دهد.
ناحیه متن (Textarea)فیلد ورودی چند خطی
انتخابگر (Select)کامپوننت انتخاب گزینه از لیست
انتخاب ترتیب (SortSelect)ترتیب فهرست با پیشوند «مرتب‌سازی» و برچسب مقدار — «مرتب‌سازی: مهم‌ترین»
سلکت بومی (NativeSelect)یک select بومی HTML با استایل بهتر
چک‌باکس (Checkbox)کنترل فرم برای انتخاب چند گزینه‌ای
کارت رادیو (RadioCard)کنترل پیش‌فرض برای انتخاب یک گزینه از چند گزینه — کارت‌هایی با عنوان، توضیح، اطلاعات تکمیلی، آیکون و نشان
گروه رادیو (RadioGroup)کنترل فرم برای انتخاب تک گزینه‌ای
سوییچ (Switch)کنترل تغییر وضعیت دوحالته
اسلایدر (Slider)کنترل انتخاب مقدار با کشیدن
گروه تاگل (ToggleGroup)گروهی از دکمه‌های toggle
انتخابگر تاریخ (DatePicker)کامپوننت انتخاب بازه تاریخ با پشتیبانی از تقویم شمسی و میلادی
انتخابگر بازه تاریخ (DateRangePicker)کامپوننت انتخاب بازه تاریخ با پشتیبانی از تقویم شمسی و میلادی
انتخابگر تاریخ و ساعت (DateTimePicker)کامپوننت انتخاب یک تاریخ به‌همراه ساعتِ روز، با پشتیبانی از تقویم شمسی و میلادی
تقویم (Calendar)کامپوننت پایه تقویم با پشتیبانی از تقویم شمسی و میلادی
اتوکامپلیت (Autocomplete)کامپوننت Autocomplete برای جستجو و پیشنهاد نتایج
انتخاب چندتایی (MultiSelect)انتخاب چند گزینه از لیست با جستجو و چیپ‌های قابل حذف
انتخاب کشور (CountryPicker)چندانتخابی کشورها بر اساس کد ISO 3166-1 alpha-2 با پرچم
انتخاب استان (RegionPicker)چندانتخابی 31 استان ایران بر اساس slug یا کد ISO 3166-2:IR
ورودی تگ (TagInput)کامپوننت ورودی چندتگی برای افزودن و مدیریت تگ‌ها
ورودی OTP (InputOTP)فیلد ورودی کد یکبار مصرف
ورودی جستجو (SearchInput)فیلد جستجو با آیکون، دکمه پاک‌کردن و حالت بارگذاری
فرم (Form)مدیریت فرم با react-hook-form و zod
ردیف فرم (FormRow)یک فیلد فرم — برچسب، کنترل، پیام خطا و توضیح — که چیدمانش را ظرف تعیین می‌کند، نه خود ردیف
فیلد (Field)wrapper پیشرفته برای فیلدهای فرم
سربرگ فرم (FormHeader)سربرگ بخش — عنوان و توضیح در ابتدای خط، اقدامات در انتهای خط، بالای یک فرم یا جدول
چیدمان آیتم فرم (FormItemLayout)داربست ردیف فرم — برچسب، توضیح و خطا؛ با چهار حالت چیدمان شامل ردیف toggle
چیپ برچسب (LabelChip)چیپ فشرده برای نمایش برچسب‌های موضوعی و دسته‌بندی — با شش tone رنگی، نشانگر برچسب هوش مصنوعی همراه درصد اطمینان، و اکشن‌های ویرایش و حذف درون‌خطی.
دیالوگ ویرایش برچسب (LabelEditDialog)دیالوگ کنترل‌شده برای ویرایش برچسب‌های خوشه‌بندی هوشمند — با فیلد متنی، تاگل «تولید‌شده توسط AI»، پیشنهادهای انتخاب سریع و اکشن حذف اختیاری.
سایدبار فیلتر (FilterPanel)سایدبار فیلتر در ستون دوم قاب، با همه‌چیز داخلش — شمار فیلترهای فعال و «پاک کردن همه»، چیپ‌های مقدار فعال، نشانگر هر بخش و کنترل متناسب با داده؛ تنها جای دیگر فیلتر، چند فیلتر کشویی در نوار ابزار است
فیلتر بازهٔ عددی (FilterSectionRange)بخش فیلتر برای عددی که ترتیب دارد (امتیاز اعتماد، سن اکانت، روز از آخرین ورود) — دو فیلد «از» و «تا» با اعتبارسنجی لحظه‌ای، میان‌برهای شمارش‌دار و خلاصهٔ مقدار فعال در بخش بسته.
انتخاب بصری در فیلتر (FilterSectionChoices)کنترل‌های بصری بخش فیلتر، متناسب با نوع داده — تراشه، کارت، نمونهٔ رنگ، سه‌بخشی و کارت سطح — با رنگ توکن DS، آیکون و شمار؛ به‌همراه FilterSectionPeriod برای بازهٔ زمانی.
نوار فیلتر (FilterBar)جزء سطح پایین ردیف فیلتر (ردیف فیلترها، عملیات و فیلترهای فعال) برای پنل و کارت؛ نوار فیلتر صفحهٔ فهرست را قالب ListPage می‌سازد.
فیلتر چیپ (FilterChip)نمایش فیلترهای فعال با قابلیت حذف
پروایدر فیلتر (FilterProvider)لایه‌ی state-management برای FilterPanel — context provider، sync با URL، ذخیره‌سازی preset در localStorage؛ نه برای صفحهٔ فهرست یا داشبوردی که با قالب ساخته می‌شود
انتخابگر دوره (PeriodSelector)انتخاب دوره زمانی با دکمه‌های Toggle