Skip to main content

Checkbox Guidelines

Use Checkboxes when a list of options is given and the user may select any number of choices — zero, one, or several. A Checkbox can also be stand-alone as a single option that the user can select or leave unselected.

Best Practices​

A stand-alone Checkbox should:

  • Let the user select or deselect a single option.
  • Have a clear group label that describes what the selection is about.
  • Have labels positioned on the right side of the boxes.
  • Let users interact by clicking on either the box itself or its label.
  • Be clearly labelled with a few words in a single line of text.
  • Only apply their effect on submitting. Until submission they are in an interim state.

Checkboxes in a list should:

  • Let the user select multiple choices from a list of options.
  • Work independently from each other — checking one box doesn't uncheck another.
  • Align vertically to emphasise the connection between options.
  • Follow an intentional ordering logic, for example frequency of use.

Try to avoid:

  • Letting Checkboxes trigger actions.
  • Using them for switching between two states immediately — use the Switch component instead.
  • Sorting items in alphabetical order, as it could make localisation difficult.
  • Using Checkboxes when there are mutually exclusive options — use Radio buttons instead.
  • Overwhelming the UI with a large number of options — use Multiselect with search instead.
  • Aligning items horizontally, as it can make the affiliation of boxes and labels indistinct.

Content Guidelines​

Checkbox labels should:

  • Start with a capital letter.
  • Not end in punctuation unless they form sentences.
  • Have positive and active wording, so it's clear what will happen if the user enables the Checkbox.
  • Avoid overlapping choices, e.g. Age ranges 0–18 and 18–35 (where will 18-year-olds be sorted?).