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
handler. Use the
checked property to get the latest value
and update state accordingly.
- 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).
CheckboxPrimitive to implement custom behaviours and appearances.