Menu
Components
Checkbox group
Checkboxes allow the user to select any number of items from a short list of options.
UX Owner: Charlie Corkbeat
UI Owner: Steven Roberts
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
On this page
Example
When to use
Checkbox groups can be used where:
- The user can select one or more answers from a set of predefined options; and
- There are 6 or fewer options to choose from
When not to use
Checkbox groups shouldn’t be used where: - The user is only allowed to select one answer (use radios instead) - You are planning to use only one checkbox (see checkbox instead)
Variants
Trailing icon
If an additional visual aid can increase the recognition of selection options, an icon can be displayed within the checkbox.
But it’s not just limited to icons: other visual aids like flags and logos can be used if it helps, too. Just remember the image has to work within the small space provided.
Try to stick to one image type per checkbox group if possible (in other words, don’t mix flags with logos!).
Hint text
If an item needs a bit of extra information to make it clear to the user, consider using hint text.
You can find guidance on how to write hint text in the writing checkbox text section below.
Hint text and trailing icon
The two variants above can even be combined if needed.
Without container
Wherever possible, the checkbox with the container should be used, as it has a clear and visible tappable area.
However, when space is at an absolute premium the container can be removed by using this variant of the checkbox group. Generally, the only place this is currently used is in the results filter panel.
Note: The tappable area still includes the text alongside the checkbox
Anatomy
Checkbox group layout
Checkboxes should always be stacked vertically within a group.
Ordering checkboxes
There’s no exact science to this. Ordering will often be subjective depending on the selection options.
However, as a general rule of thumb:
- Try sorting checkboxes first by any natural or logical order, such as size, increasing risk, or into subgroups
- If there’s not clear logical order, consider sorting the selection options by popularity (based on existing data)
‘None of the above’ checkboxes
Where it’s possible for users to leave all of the checkboxes in the group unselected, consider using a ‘None of the above’ option (or similar such as ‘No, thanks’).
Example
Note: Where there is a ‘none of the above’ option (or similar), it should always come last in the list.
Special logic
When a ‘none of the above’ option is added to the checkbox group, it works in a slightly different way to the other checkboxes.
Once selected, the ‘none of the above’ checkbox includes logic that toggles any all other checkboxes within the group to the unselected state.
Conversely, when any of the other checkboxes within the group are selected, the ‘none of the above’ checkbox is automatically unselected.
Example
This logic also works the other way around.
Other options to consider
If ‘no’ or ‘none of the above’ is the most likely answer to your question, consider whether asking a yes/no question instead might result in a better user experience.
Example
Note: Adding a yes/no question like this means the list of specific items is hidden until the user makes a ‘Yes’ selection. This means it’s only really appropriate when the user can confidently answer the first question without seeing the list of options.
Writing checkbox text
Checkbox button text should:
Be concise It should be able to sit on a single line, regardless of the device type. Where more text is required to make the selection option clear, consider using the hint text feature toggle
Clearly differentiate one selection option from another Avoid any ambiguous terminology
Checkbox hint text should:
Be kept to a maximum of 2 lines where possible Ideally try to keep to a single line but if needed we can stretch to 2 lines with the goal of keeping it short and simple for users
Be written using sentence case Pronouns such people’s names and brand names should still be capitalised. Unless there’s good reason to use one, hint text generally doesn’t need a full stop at the end either
How to deal with 6+ options
Where there are more than 6 selection options, you may still be able to use checkboxes to show the more popular answers, while adding less popular options within another component such as lookup.
Example
Selection states
Unselected
Field has not been clicked yet by a user
Selected
Field has been clicked yet by a user
Interaction states
For general information and guidance about these states, see Interaction (link to follow).
Hover
When a user’s cursor moves over a checkbox there are subtle changes to both the border of the enclosed check indicator and the background colour of the entire checkbox.
Focus
When focus is applied to a checkbox an offset border is applied.
Disabled
Field is deactivated and can’t be interacted with. Both selected and unselected checkboxes can be disabled. When disabled, there are no hover or focus interactions.
Error validation states
Checkboxes don’t have an error validation state. Any associated error is indicated through validation messaging and error styling on the question itself. See error notifications for further information.
Similar components
Where to find this component
Documentation version history
Last updated Thursday, 1st April 2021 11:57 by Adrian T.