Menu
Components
This page is In Progress and subject to frequent changes
Please contact Adrian T. to verify any information is correct before using it.
Checkbox group
In Progress
Hey, this is an old version. View the latest
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 radio button group group 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.
The design system team feel the UI solution and logic for handling ‘none of the above’ selections could be improved.
If you’re considering implementing this solution in your channel, please contact Gemma Darracott or the UX owner of this page to find out the latest.
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.
Where to find this component
Documentation version history
Last updated Thursday, 1st April 2021 11:57 by Adrian T.