Checkboxes provide users with a range of options for a given statement where the user may select any number of choices, including zero, one or multiple. In a form, always place checkboxes underneath each other to aid in a user’s ability to scan the form.
Checkbox component maps to a checkbox input and a label. The label is
children to the component. If you need custom label behaviour use
Checkbox component passes on the original event through the onChange handler. Use the event target's
checked property to get the latest value and update state accordingly.
Checkbox is available in a "small" size. Reserve this appearance for data-rich, dense interfaces.
- Avoid checkboxes with actions that are the opposite of what the user expects.
- The default view for checkboxes has no option selected.
- Checkbox options should be listed in a logical order (alphabetical, numerical, time-based, etc).
CheckboxGroup to implement a group of checkboxes. Each
Checkbox within a group must have a "value" prop.
CheckboxPrimitive to implement custom behaviours and appearances.
true | false | 'mixed', where "mixed" indicates an indeterminate state aligning with the aria-checked attribute.