Checkboxes allow users to select one or more items from a list.

How to use a checkbox

A checkbox should be used when the user can select multiple items in a group. Users can select zero, one or any number of items.

When using a checkbox:

  • The checkbox items should work independently from each other, so selecting one checkbox shouldn’t change the status of another checkbox in the list
  • List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order
  • Always have a unique label attached to each checkbox
  • Visually position your label to the right of the checkbox
  • Programmatically connect each label to its corresponding checkbox

If only one item can be selected from the list, use radio buttons instead of checkboxes.

If the user’s action results in an immediate change, use a switch instead of a checkbox.

Types of checkboxes

Stacked checkbox

Use a stacked checkbox if there are more than 3 options for the user to choose from.

  • Interactive demo - Sainsbury's

Inline checkbox

Use an inline checkbox if there are fewer than 3 options for the user to choose from and the checkbox labels are short.

  • Interactive demo - Sainsbury's

Outlined checkbox

Use an outlined checkbox to give the options more visual impact and distinction.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Checkbox with an error message

  • Interactive demo - Sainsbury's


Standalone checkboxes let you remove text for more flexibility with the position of the checkbox. Make sure that context is provided to the user by the surrounding content of the checkbox and that the checkbox has an accessible name.

  • Interactive demo - Sainsbury's

Copy guidelines

When using a checkbox:

  • Be clear about what will happen if the checkbox is selected
  • Frame your items positively, for example: ‘How would you like to be contacted?’ instead of ‘How would you not like to be contacted?’
  • Start your checkbox labels with a capital letter
  • Don’t use commas or any punctuation at the end of each label
  • Don’t use more than three words per label

Was this page helpful?

Get in touch

Our team can answer any questions about using checkboxes or give you a helping hand with your next project.
Select a theme to demo: