Description
ONGOING
Checkboxes are used for a list of options where the user may select multiple options, including all, some or none.
It has 3 modes: unselected, selected and partially selected.
The partially selected state comes into play when the checkbox contains a sub-list of selections, some of which are selected, and some unselected.
Example:
The component may be used as a single checkbox in which the user can check/uncheck it or it may be used s a group of joined checkboxes that can be selected at the same time.
Usage & Behaviour
General guidelines
Structure
Checkboxes patterns:
A single checkbox - an individual choice
independent choices (zero or more) - users can select any combination of options in a group of checkboxes
Master type checkbox which controls other checkboxes' states.
States
The checkbox control allows 3 modes:
 | Checked |
 | Unchecked |
 | partially selected - this option is used when the checkbox contains a sub-list of selections, of which some are selected and some are not. |
For each if the modes, you can find the different states below:
Interaction
Clicking a checkbox toggles between the states ‘checked' and ‘unchecked’.
For checkboxes in partially selected state, clicking them will move them to the “checked” state and check all of the sub checkboxes. An additional click will uncheck to master checkbox and all its sub checkboxes.
Within a group of checkboxes, each checkbox can be checked or unchecked. The user can check multiple options.
Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.
The checkbox will have an hovered/active state when hovering/clicking either the checkbox or the label describing it.
The partially selected state is visual only and indicates that an option is set for some, but not all, child objects. This state can’t be achieved by a direct user interaction on the checkbox itself.
Validation and Errors
Please refer to Field validation page for more information.
Best practices
List check boxes 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 recommendwd to align check boxes vertically, not horizontally.
Write the label as a short phrase or an imperative sentence, and use no ending punctuation.
The default view of a set of checkboxes is having no option selected.
Use positive and active wording for checkbox labels. Avoid negative statements.
Do not use a checkbox (or a checkbox group) if:
The user needs to select a single mutually exclusive choice within a group → use Radio Buttons.
Space is constrained → use a DropDown menu.
The user may need to enter a choice that is not pre-defined → use a Combo Box.
The user needs to select from a range of values → use a Slider.
If the user needs to choose multiple options from a large list → consider using a multi select searchable dropdown instead.
The resulting action will be instantaneously applied, without the need for further confirmation → use a toggle button.
Future Version (TBD)
Add to structure - dependent choices where at least 1 option must be selected (future TBD)
Design
Zeplin Link | Thumbnail |
|---|---|
 |
Current appearances in our products
WFM Calendar → Generate Schedule
A single checkbox:
