Change log
Components
Checkbox
- Overview
- Usage
Overview
When to use
Use checkboxes when you need to let users select multiple options from a list or toggle a single option on or off.
When not to use
Do not use checkboxes if users can only choose one option from a list. In this case, use the radios component.
Principles​
Make the label clickable. Users should be able to click on either the text label or the checkbox to select or deselect an option.
Always position checkboxes to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.
Unlike with radios, users can select multiple options from a list of checkboxes. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone. If needed, add a hint explaining this, for example, “Select all that apply”.
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
Variants​
Single checkbox​
Single checkboxes have two variants: with labels and without.
Checkboxes should have labels in most instances.
A checkbox without a label is most often used in a data table, where its context or interaction is made clear, either by its placement, or by its relationship to other content within the same row or column. Even if the checkbox has no visible label, it will still require a hidden label for assistive technologies.
With label
Without label
Inline checkbox
Checkbox group​
Related checkboxes can be grouped together. Using a legend is recommended.
Size​
Regular should be used in most cases. Compact could be used for example in large and dense data tables and filter interfaces.
Regular size
Compact size
Hint text​
Required indicator​
Related checkboxes can be grouped together. Using a group label is recommended. Checkbox group can also have its own hint text.
If there are more than five items in a group, consider using the select component.
Required single checkbox
Required checkbox group
Required indicator on a multiple line label
Error state​
Disabled state​
Use this state when the user doesn’t have permission to edit the field.
Usage guidelines
Label text​
Provide a simple and clear text label.
Avoid truncating the labels. If the text is long and horizontal space is limited, either wrap the label text to multiple lines or consider placing the key text in the label and have the additional information as the hint text. The latter makes it easier to quickly scan the options.
Do
Do
Don't
Links in labels​
Do not link the entire checkbox label as this could cause issues with the selection.
Do
Don't
Indeterminate state​
Use the indeterminate checkbox when there is a long list of sub-checkboxes to select. Align these sub-checkboxes with the label of the parent checkbox.
Do
Don't
Inline checkboxes​
Inline stacking may be used for maximum of two options with short labels. If you have more that two options and/or longer labels, use vertical stacking instead.
Do
Do
Don't