Description

Checkboxes 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 checkbox check box which the user can check or uncheck it, for example to show agreement.

A checkbox check box has 3 modes: unselected, selected, and partially selected. The partially selected state comes into play when the checkbox check box contains a sub-list of selections, some of which are selected, and some unselected.

...

General guidelines

Structure

A checkbox check box consists of:

• A label describing the option.

• A corresponding checkbox

...

• check box.

Check boxes patterns:

• A single checkbox check box - an individual choice.

...

• Independent choices (zero or more) - users can select any combination of options in a group of checkboxescheck boxes.

...

• Master type checkboxcheck box, which controls the state of all the other checkboxes check boxes in a group.

...

States

The checkbox check box control allows 3 modes:

	Checked (Selected)
	Unchecked (Unselected)
	Partially selected - this option is used when the checkbox check box contains a sub-list of selections, of which some are selected and some are not.

...

State	Unchecked	Checked	Partially selected
Regular
Hover
Active
Disabled
Focused
Focused, Hover
Focused, Active
Focused, Disabled

Interaction

• Clicking a checkbox check box toggles between the ‘checked' and ‘unchecked’ modes.

• For checkboxes check boxes in the partially selected state, clicking them will move them to the 'checked' state and check all of its child checkboxescheck boxes. An additional click will uncheck the master checkbox check box and all its child checkboxescheck boxes.

• Within a group of checkboxescheck boxes, each checkbox check box can be checked or unchecked independently. The user can check multiple options.

• Users should be able to select the checkbox check box by clicking on the box directly or by clicking on its label. 

• The checkbox check box can be selected by clicking on either the checkbox check box or the label.

• The checkbox check box will have a hovered state when hovering over either the checkbox check box or the label.

• The checkbox check box will have an active state during the action of clicking either the checkbox check box or the label.

• The partially selected state is visual only and indicates that some, but not all, of the child checkboxes check boxes are checked. This state can’t be achieved by a direct user interaction on the checkbox check box itself.

Validation and Errors

Please refer to Field validation page for more information.

Best practices

• List checkboxes 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 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 checkbox check box labels. Avoid negative statements.

• The default state of a group of checkboxes check boxes is having no option selected.

• Do not use a checkbox check box (or a checkbox check box group) if:

  • The user needs to select a single mutually exclusive choice within a group → use Radio Buttons.

  • Space is constrained → use a 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.

  • 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.

...