Checkbox
Use checkboxes to let users pick one or more options.
Checkboxes are a clear and simple way for users to choose answers or items from a list. Each checkbox has two states: selected or unselected, similar to an on and off switch.
When to use
Use the checkboxes component when you need to help users:
- select multiple options from a list
- toggle a single option on or off.
When not use
Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the radio component.
How to use
Always position checkboxes to the left of their labels; this makes them easier to find, especially for users of screen magnifiers.
It's common to include "check all that apply." instructions with checkboxes to let users know it's okay to select more than one option at a time.
Do not pre-select checkbox options as this makes it more likely that users will:
- not realise they've missed a question
- submit the wrong answer.
Order checkbox options alphabetically by default. In some cases it can be useful to order them from most-to-least common so the most common options are presented first. However you should do this with caution as it can reinforce bias in your service. If in doubt, order alphabetically.
Single checkboxes
Single checkboxes allow a user to select something on or off.
Grouped checkboxes
Multiple related checkboxes will always be used with our Form Group component.
The form group:
- wraps the checkboxes in a
<fieldset>with a<legend>that describes the group. - allows you to add hint text that applies to the entire group.
The legend is usually a question, like "How would you like to be contacted?".
Unlike radios, users can select more than one option from a list of checkboxes. Do not assume that users will know how many selections they can choose based on the visual difference between radios and checkboxes alone.
Add hint text explaining this, for example, "Select all that apply.".
Add an option for "none"
When "none" would be a valid answer, give users the option to check a box to say none of the other options apply to them. Without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
Show the "none" option last.
Write a label that repeats the key part of the question.
For example, for the question "Will you be travelling to any of these countries?", say "No, I will not be travelling to any of these countries".
If you're asking one question on the page
If you're asking just one question per page as recommended, you can set the contents of the <legend> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
Read more on the GOV.UK Design System about why and how to set legends as headings.
Inline checkboxes
Inline checkboxes don't support hint text for individual checkboxes. You can still add hint text to the group of inputs to explain what the checkboxes are about.
Checkbox hint text
Keep hint text short and simple.
Do not use links in hint text. While screen readers will read out the link text when describing the item, they usually do not tell users the text is a link.
Hint text can be added to both:
- An individual checkbox.
- The overall group of checkboxes in the form group.
Individual checkbox hint text
Add hint text to individual checkboxes to provide additional context or help.
Grouped checkboxes hint text
Add hint text to the group of checkboxes to provide context or help for the overall group.
Asking complex questions
If you're asking a question that needs a detailed explanation, don't use hint text, instead use:
- a heading that's a statement (for example, "Interview needs") rather than a question.
- whatever mix of text, paragraphs, lists and examples best explains your question to users.
- a label, above the form input, that asks users a specific question - for example, "Do you have any interview needs?".
Errors
Display an error message when:
- A user hasn't selected a checkbox when one is required.
How to use error messages
Error messages are displayed like this:
The error message text appears in red above the question text and any hint text.
Do not clear any form fields when showing the error message. Keep both passing and failing answers.
Keeping information that caused errors helps users to:
- see what went wrong
- edit their previous answer
- avoid re-entering information.
When not use to use error messages
Only display an error when someone tries to move to the next part of the form or service.
Do not show error messages:
- when users select or tab to a field
- when they move away from a field.
Accessibility
Component meets WCAG AA guidelines for accessibility on:
- Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.2 - 1.4.3).
- UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.2 - 1.4.11).
- Accessible use of color - Color is not used as the only visual means of conveying information (WCAG 2.2 - 1.4.1).
Research/evidence
We tested the checkbox component on an "In consultation Comment Collection" prototype in 2021. Users understood the purpose of the checkbox and were able to use it.
Our checkboxes are based on the GOV.UK Design System. Read more about how GOV.UK developed and tested them.
Help improve this page
To help make sure that this page is useful, relevant and up to date, you can:
Need help?
If you've got a question about the NICE Design System, contact the team.
- If you work for NICE, ask us a question in our Teams channel
- If you work outside of NICE, you can get in touch with us via Github discussions