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 |