Checkbox

Overview#

Use checkboxes to present a list of options to a user where multiple selection can be made.

Design Guidelines#

Use when#

A user can select multiple options.

  • Some examples are:
    • Selecting multiple locations in a location picker

Don't use when#

  • A user can only select one options.

Checkbox

Use when multiple selection can be made.

Visual Style

  • Always use the default component style.
  • Always include a label to the right of the checkbox.

Behaviour

  • Clicking an unselected checkbox will select it.
  • Clicking a selected checkbox will unselect it.
  • Multiple checkboxes can be selected.
  • If you use only one checkbox, it is the same as a toggle between two states. The change must be submitted before the state will be changed.
  • If you have a list that has multiple levels, if all checkboxes within the levels are selected, the highest level one will be selected.
  • If you have a list that has multiple levels, if only some of the checkboxes within the levels are selected, the highest level one will be in an indeterminate state.

Editorial

  • Each label should clearly describe the result of selecting the checkbox.
  • Always write label in sentence case.
  • Avoid long labels.
Last updated on by Paulo Andrade