Checkbox

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

Anatomy

The checkbox component is made up of four elements.

  1. Checkbox input
  2. Helper text
  3. Status mark
  4. Label

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.

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.

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.

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
Unselected
The unselected checkbox includes enabled, focus, hover, active, disabled, and pending states.
Selected
The selected checkbox includes enabled, focus, hover, active, disabled, and pending states.
Indeterminate
The indeterminate checkbox includes enabled, focus, hover, active, disabled, and pending states.

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.

Component tokens

The following component tokens are available for customizing the checkbox component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.

Color

Opacity

Border

Shadow