Skip to main content

Checkbox

Checkboxes allow users to select one or more options from a group of options.

Code documentation

Web

Anatomy

The checkbox component is made up of four elements.

  1. Checkbox input
  2. Helper text
  3. Status mark
  4. Label
Anatomy diagram numbering four elements of a checkbox.

Variants

Label

Labels describe the purpose of the checkbox. The default label may be omitted provided an adjacent label is appropriately referenced to the field for accessibility purposes.

Two checkboxes are compared side-by-side. The left checkbox includes a label positioned to the right of the checkbox input. The right checkbox does not include a label.

Helper Text

Helper text can be included alongside the label to provide additional context or guidance for using the control. A label is required for helper text to display.

A checkbox with label includes sample helper text immediately below the label. The helper text is aligned to the left edge of the label text and both are positioned to the right of the checkbox input.

Behavior

Text flow

When labels wrap to multiple lines, the first line of the text should remain vertically centered with the control. Helper text should simply wrap to the next line.

The checkbox's label and helper text each wrap to multiple lines when they meet the edge of an implied container around the checkbox.

States

Checkboxes can be either unselected, selected, or indeterminate. Each of those statuses has five states:

  1. Enabled
  2. Focus
  3. Hover
  4. Active
  5. Disabled
The unselected checkbox includes enabled, focus, hover, active, disabled, and pending states.
Unselected
The selected checkbox includes enabled, focus, hover, active, disabled, and pending states.
Selected
The indeterminate checkbox includes enabled, focus, hover, active, disabled, and pending states.
Indeterminate

When a checkbox is in an indeterminate state, a subsequent interaction will send it to a selected state. Another interaction will send it to an unselected state.