چکباکس (Checkbox)
چکباکسها به کاربران این امکان را میدهند که یکی یا چند گزینه را از فهرستی انتخاب کنند.
پیشفرض (Default)
مثال سادهای از چکباکس.
گروه (Group)
Checkbox.Group به مدیریت وضعیت چکباکسها در یک فهرست کمک میکند.غیرفعال (Disabled)
چکباکس امکان غیرفعال شدن با استفاده از
disabled برای جلوگیری از اجرای رویداد کلیک توسط کاربر را دارد.عمودی (Vertical)
فهرست چکباکسها میتواند بهصورت عمودی نیز نمایش داده شود.
رنگ (Color)
چکباکس و گروه چکباکسها میتوانند با استفاده از
color پروپ سفارشی شوند.API
چکباکس (Checkbox)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| checked | آیا چکباکس انتخاب شده است | boolean | - |
| defaultChecked | آیا وضعیت اولیه چکباکس انتخاب شده است | boolean | - |
| disabled | آیا چکباکس غیرفعال است | boolean | - |
| value | مقدار وضعیت انتخاب شده (فقط زمانی که Checkbox.Group یا نوع شیء مرتبط آرایه باشد معتبر است) | string | number | - |
| labelRef | رفرنس عنصر برچسب چکباکس | string | - |
| checkboxClass | استایل سفارشی برای چکباکس | string | - |
| onChange | کالبک زمانی که مقدار چکباکس تغییر کند | (checked: boolean, e: MouseEvent) => void | - |
| name | نام فیلد ورودی چکباکس | string | - |
انتخاب گروهی (Checkbox.Group)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| vertical | نمایش فهرست چکباکسها بهصورت عمودی | boolean | false |
| color | رنگ سفارشی برای تمام چکباکسها در گروه، رنگهای قابل استفاده بر اساس theme.colors در tailwind | string | رنگ پیشفرض تم جاری |
| value | مقدار انتخابی چکباکسها را مشخص کنید | string[] | number[] | - |
| onChange | کالبک زمانی که مقدار تغییر کند | (values: string[] | number[], e: MouseEvent) => void | - |
| name | نام تمام فیلدهای ورودی چکباکسها در گروه | string | - |