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