Checkbox
Checkboxes let users select one or more options from a choice of list.
Default
A simple checkbox example.
Group
Checkbox.Group help to manage state of checkboxes in a list.Disabled
Checkbox allow to
disabled to prevent user execute click event.Vertical
Checkbox list can display in vertical too.
Color
Checkbox & group able to apply custom color via
checboxClass prop.API
Checkbox
| Prop | Description | Type | Default |
|---|---|---|---|
| checked | Whether the Checkbox is checked | boolean | - |
| defaultChecked | Whether the Checkbox initial state is checked | boolean | - |
| disabled | Whether the Checkbox is disabled | boolean | - |
| value | The value of the selected state (only valid when Checkbox.Group or the binding object type is array) | string | number | - |
| labelRef | Ref of Checkbox label element | string | - |
| checkboxClass | Custom css for Checkbox | string | - |
| onChange | Callback when Checkbox value is changed | (checked: boolean, e: MouseEvent) => void | - |
| name | The name of the Checkbox input field | string | - |
Checkbox.Group
| Prop | Description | Type | Default |
|---|---|---|---|
| vertical | Display list of checkbox in vertical | boolean | false |
| color | Custom color for all checkboxes in the group, available colors option based on tailwind theme.colors | string | current theme color |
| value | Specify selected value of checkboxes | string[] | number[] | - |
| onChange | Callback when value is changed | (values: string[] | number[], e: MouseEvent) => void | - |
| name | Name of all checkboxes input field under the group | string | - |