Checkbox
ARIA
RTL
The checkbox is shown as a square box that is ticked (checked) when activated.
Checkboxes are used to let a user select one or more options of a limited number of choices.
Default
With Label
Checked
Disabled
ReadOnly
Partially selected
Customization
Checkbox props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| ariaLabel | string | No | - | ARIA description of checkbox |
| bgColor | string | No | bg-piccolo | Checked state of checkbox |
| checked | boolean | No | false | Checked state of checkbox |
| disabled | boolean | No | false | Disables checkbox |
| id | string | No | - | Unique id of checkbox |
| label | JSX.Element | string | No | - | Describes checkbox's purpose |
| onChange | (event) => void | No | - | Change event handler |
| onClick | (event) => void | No | - | Click event handler |
| readOnly | boolean | No | false | Value of checkbox can't be changed |
| indeterminate | boolean | No | - | Set checkbox as indeterminate and does not modify the checked state |