Checkboxes allow the user to select one or multiple options within a list.
# Description
The user may select any number of choices, including zero, one, or several. Each checkbox is independent of the other checkboxes within the list.
Checkboxes should not be confused with radio buttons, which are used for mutually exclusive options.
# Must include
- Input - to indicate the checked/unchecked state.
- Label - to indicate the information to be checked/unchecked.
# Optional
- Helper text - to indicate what checkbox label means.
- Group title - to indicate the group of radio button options.
# Rules
- Observe the minimum touchpoint area (56px)
- Allow users to tap/click the entire checkbox area, rather than just the circle.
- Giving checkboxes meaningful labels at a length of 3 words is advised.
- Long labels can wrap onto another line but do not truncate labels with an ellipsis.
- Don't use checkboxes as the main action (e.g. a button).
- Avoid displaying checkbox groups horizontally. This makes it difficult to separate each item within a list.
# Accessibility
- If in a set, checkboxes should have an appropriate group label to help assistive technology users understand that each checkbox in the set belongs to a group.
- The whole checkbox area must be clickable (box and text) to ensure users with motor difficulties are able to interact with the checkbox.
- Checkboxes should adhere to a minimum clickable area of 56px.
- Always use a check icon within the checkbox, not a just solid colour, to provide an additional visual indictor for conveying checked and unchecked states.
# Resources
For ARIA rules: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/