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.
[img id=27378
You can find guidance on how to write hint text in the writing checkbox text section below.
Anatomy
Providing a shortcut for an input field
A checkbox allows us to ask users to provide a positive confirmation of understanding before continuing. But it’s not limited to legal acknowledgements.
It’s also occassionally used in conjunction with another field to allow the user to skip the input, like in the example below.
Example
Note: In this example, the user can leave the date input blank provided they select the checkbox. If the date input is left blank and the checkbox is left unselected, validation would prevent the user from progressing.
Similar components
Where to find this component
Documentation version history
Last updated Thursday, 1st April 2021 11:57 by Adrian T.