| Table of Contents | ||||
|---|---|---|---|---|
|
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 statesmodes: unselected, selected and indeterminate.
Example:
Types
Type | Usage |
|---|---|
| Single checkbox | A checkbox is an on/off toggle for a single item. It lets the user set a binary value (such as “true/false”) and can be selected or unselected. |
| Checkbox group | Any number of checkboxes in a group of checkboxes can be selected at the same time. Checkboxes are independent of one another. |
Usage & Behavior
General guidelines
- 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.
- Align check boxes vertically, not horizontally. Horizontal alignment is harder to read.
- Label every check box.
- Write the label as a phrase or an imperative sentence, and use no ending punctuation.
States
The checkbox control allows 3 statesmodes:
Selected 
Unselected 
Indeterminate - this option is used when the checkbox contains a sub-list of selections, of which some are selected and some are not. This is only a visual state and can’t be achieved by a direct user interaction.
For each if the modes, you can find the different states below:
Interaction
Clicking a checkbox toggles between the states of the checkbox.
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 touchable area for toggling the checkbox ends where the text ends.
The default view of a set of checkboxes is having no option selected is this so?.
The checkbox will have an hovered/active state when hovering/clicking either the checkbox or the label describing it.
Validation and Errors
Best practices
- Use positive and active wording for checkbox labels, so that it's clear what will happen if the box is checked.
- Do not use a checkbox (or a checkbox group) if:
- Space is constrained → use a DropDown menu.
- The user needs to select a single mutually exclusive choice within a group → use Radio Buttons.
- 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 combo box instead.
- The resulting action will be instantaneously applied, without the need for further confirmation → use a toggle button.
Current appearances in our products
| Expand | ||||
|---|---|---|---|---|
| ||||
system management | enterprise | associations
Recording management | data sources | settings
WFM Calendar
Assignment Manager:
|
New LUX design
...