Checkbox
Checkboxes allow users to select one or more items from a list.
On this page
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.
Checkboxes have a selected, unselected or indeterminate state. The indeterminate state is commonly used to control a group of checkboxes.
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.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Content 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.