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, for example to show an agreement.

Open

The checkbox control allows 3 modes:

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

Usage & Behaviour

General guidelines

Structure

A checkbox consists of:

• A label describing the option.

• A corresponding checkbox.

Checkbox 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 the state of all the other checkboxes in a group.

States

For each of the three modes, 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.

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

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 checkbox 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 checkbox 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 checkboxes is having no option selected.

• If the number of checkboxes is large, consider grouping them into smaller logical groups.

• Checkboxes 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 checkboxes 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 labels. Avoid negative statements.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Code