Checkbox
Usage
When to Use
Use checkboxes to allow users to select one or more items from a list of options.
Use checkboxes if an explicit status is either on or off and does not change the view immediately.
When Not to Use
If users have to select exactly one option out of a list of options, use radio buttons or a switcher instead.
If the behavior in the 'off' state is unclear, use two radio buttons or a switcher instead. Don’t expect users to know what happens when a checkbox is unselected if it is not completely obvious.
If the action is immediate, use toggles instead. With toggles, the view will change at the moment the element is clicked.
Variants
Disabled Checkbox
If checkboxes are disabled, users can’t interact with them. Use disabled checkboxes only if it is obvious why they are disabled or what users have to do to enable them.
Default Checkbox
The default checkbox can be in one of two states: checked, or unchecked.
Intermediate Checkbox
The intermediate checkbox is only used for nested checkboxes. The parent checkbox shows the “in-between” state when neither all nor none children are selected.
Content
Checkbox Labels
Use positive wording. A checked checkbox should correspond to a positive state.
Use short and descriptive labels that fit in one line. Ditch words such as ' a' or 'the' if possible.
Use sentence-style capitalization for labels.
Group Labels
Add a group label to make a checkbox group more understandable. A checkbox group should make sense in isolation. They should not need further context to be understandable.
Add a group label if all checkbox labels begin with the same word(s).
Use the plural form for group labels. This helps users to understand that they can select multiple options.
Layout
Use 4 pixels of spacing for vertical alignment.
Generally, avoid horizontal alignment of checkboxes. If you can’t avoid it, use 16 pixels of spacing.
