| Table of Contents |
|---|
Description
ONGOING
| Status | ||||
|---|---|---|---|---|
|
Description
Checkboxes 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 checkbox which the user can check or uncheck it, for example to show agreement.
A checkbox has 3 modes: unselected, selected, selected and partially selected. The 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:
...
Usage & Behaviour
General guidelines
...
...
Usage & Behaviour
General guidelines
Structure
A checkbox consists of:
A label describing the option
A corresponding checkbox
Checkboxes patterns:
A single checkbox - an individual choice
independent Independent choices (zero or more) - users can select any combination of options in a group of checkboxes
...
Master type checkbox, which controls the state of all the other checkboxes ' statesin a group.
States
The checkbox control allows 3 modes:
 | Checked (Selected) |
 | Unchecked (Unselected) |
 | partially 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 of these modes, you can find the different states below can apply:
...
Interaction
Clicking a checkbox toggles between the
...
‘checked' and ‘unchecked’ modes.
For checkboxes in the partially selected state, clicking them will move them to the
...
'checked' state and check all of
...
its child checkboxes. An additional click will uncheck the master checkbox and all its
...
child checkboxes.
Within a group of checkboxes, each checkbox can be checked or unchecked independently. 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 can be selected by clicking on either the checkbox or the label.
The checkbox will have
...
a hovered
...
state when hovering
...
over either the checkbox or the label.
The checkbox will have an active state during the action of clicking either the checkbox or the label
...
.
The partially selected state is visual only and indicates that
...
some, but not all, of the child
...
checkboxes are checked. 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 checkboxes 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 recommended to align check boxes vertically, not horizontally.
Write the label as a short phrase or an imperative sentence, and . Do not 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.
The default state of a group of checkboxes is having no option selected.
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 Drop Down 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 The user needs to choose multiple options from a large list → consider using a multi Multi select searchable dropdown instead.
The resulting action will be instantaneously applied, without the need for further confirmation → use a toggle Toggle button.
Future Version (TBD)
Add to structure - dependent choices where at least 1 option must be selected (future TBD)
...