ual: Design System
Checkbox
A binary input that can appear individually or in a group. Users can select any number of items, including none.
When to use
- Use a checkbox when users are choosing from a list of options where each choice is independent of the others
- Use a checkbox when it is valid for a user to select none, some, or all options
- Use a standalone checkbox when users need to confirm a single binary choice, such as agreeing to terms
When not to use
- If users can only select one option from a group, use a radio button instead. A checkbox allows multiple selections, which creates the wrong expectation in a single-choice context
- For an immediate-effect on/off setting, use a switch chip instead. A switch chip communicates that the change takes effect immediately
Content guidance
- Write labels as plain statements, not questions
- Keep labels short enough to read at a glance. If you need more than one line, consider whether the option needs more context elsewhere on the page
- In a group, make each label distinct so users can tell the options apart without reading them in sequence
Accessibility
This component is designed with accessibility built in:
- Colour contrast meets 4.5:1 for the label text and 3:1 for the checkbox control across all states
- Touch target meets the minimum 44x44px tap area
- Focus state is visually distinct from the default and checked states
When implementing, verify:
- Checkbox groups are wrapped in a fieldset with a legend that describes the group
- Individual checkboxes have labels that make sense when read in isolation by a screen reader