Description
Check boxes are used where the user has the option to select or deselect one or more options. It can be used:
for a list where the user can select multiple options, including all, some, or none.
as a single check box which the user can check or uncheck, for example to show an agreement.
 |
|
The check box control allows 3 modes:
 | Checked (Selected) |
 | Unchecked (Unselected) |
 | Partially selected - this option is used when the check box contains a sub-list of selections, of which some are selected and some are not. |
Usage & Behaviour
General guidelines
Structure
A check box consists of:
A label describing the option.
A corresponding check box.
Check boxes patterns:
A single check box - an individual choice.
Independent choices (zero or more) - users can select any combination of options in a group of check boxes.
Master type check box, which controls the state of all the other check boxes in a group.
States
For each of the three modes, the different states below can apply:
State | Unchecked | Checked | Partially selected |
|---|---|---|---|
Regular | | | |
Hover |  |  |  |
Active |  |  |  |
Disabled |  |  |  |
Focused |  |  |  |
Focused, Hover |  |  |  |
Focused, Active |  |  | |
Focused, Disabled |  |  |  |
Interaction
Clicking a check box toggles between the ‘checked' and ‘unchecked’ modes.
For check boxes in the partially selected state, clicking them will move them to the 'checked' state and check all of its child check boxes. An additional click will uncheck the master check box and all its child check boxes.
Within a group of check boxes, each check box can be checked or unchecked independently. The user can check multiple options.
The check box can be selected by clicking on either the check box or the label.
The check box will have a hovered state when hovering over either the check box or the label.
The check box will have an active state during the action of clicking either the check box or the label.
The partially selected state is visual only. This state can’t be achieved by a direct user interaction on the check box itself.
Validation and Errors
Please refer to Field validation page for more information.
 |
Best practices
Use:
when the user needs to select or deselect one or more options.
when the options needs to be visible.
Do not use a single check box if:
the resulting action is immediately applied, but not shown on the page (e.g. when something is activated) → use a Switch button.
Do not use a check box group if:
the user needs to select a single mutually exclusive choice within a group → use Radio Buttons.
space is constrained or if the user needs to choose multiple options from a large list → consider using a Multi-select Drop-down Menu instead.
General
The default state of a group of check boxes is having no option selected.
If the number of check boxes is large, consider grouping them into smaller logical groups.
Check boxes should be listed in a logical order, such as
grouping highly related options together, or
placing most common options first, or
following some other natural progression.
Alphabetical ordering isn't recommended because it is language dependent, and therefore not localizable.
It’s recommended to align check boxes vertically, not horizontally.
Write the label as a short phrase or an imperative sentence. Do not use ending punctuation.
Use positive and active wording for check box labels. Avoid negative statements.
Focus management
Keyboard | Description |
Tab | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. |
Space | Applies or Removes the check ✓. |
Enter | N/A |
Esc | N/A |
Arrows | N/A |
Design
Zeplin Link | Thumbnail |
|---|---|
 |