Forms - Checkbox

Anatomy of the checkbox and checkbox set component

Best practices

When to use

  • Use a single checkbox for user agreements, terms, conditions, acknowledgements, or for features, filters and settings.
  • Use a checkbox set when you have two or more options and want a user to choose one or more options.

When not to use

  • When one needs more visual emphasis see Panel Button.
  • When one has more than 6 options consider a Dropdown menu which will take up less vertical/horizontal space.
  • When one is constrained on space consider a Dropdown menu.
  • When one has “on” and “off” options use a Toggle switch.

Layout

  • Layouts can consist of a single checkbox or a checkbox set.
  • Each checkbox has its respective label to the right of the checkbox.
  • If a checkbox set has an error, the error message lives directly below the checkbox set.

Content

  • A single checkbox or checkbox set needs at least a label.
  • Use assistive text in the form of a description to add context to the checkbox label or checkbox set label.
  • For readability, keep checkboxes and their associated labels to a single line.

Accessibility

  • Ensure checkbox sets have set labels and descriptions. This helps screen reader users obtain contextual information about the choices they need to make.

Variants

Checkbox

Variants for state — base, focused, hoveredVariants for checked — true or falseVariant label - Text field that is required even if not visibleVariant disabled — true or false

Checkbox set

Variant description — If true, additional assistive text is providedVariant inputsOnly — true or falseVariant required — true or falseVariant disabled — true or falseVariant error — true or falseVariant indeterminate — true or false

Guidelines

Checkbox labels and descriptionsWhen to use a single checkboxWhen to use indeterminate

Behaviors

State

Base

The normal state one would see a checkbox in, which is unchecked or deselected.

Checked

The state where the checkbox itself is checked or selected.

Label

The checkbox label describes the checkbox option and sits to the right of the checkbox itself.

Disabled

The state in which the checkbox is disabled. In this state a user cannot interact with the checkbox.

Focused

The state in which a keyboard is focused on a checkbox. In this state a user will have a visual aid in the form of a focus ring.

Hovered

The state in which a user's pointing device is hovering over a checkbox.

Error

The state in which a user has visual feedback that there is an error associated with this checkbox or checkbox set.

Indeterminate

The state in which a checkbox set, or nested checkbox set, shows that there are some checkboxes checked. A click or tap on the indeterminate checkbox will check all boxes in the group, the following click or tap will uncheck all checkboxes in the group

Interactions

Mouse

  • A mouse or pointer device can interact with the checkbox by clicking on one at a time.
  • When a user clicks on a checkbox, it checks that checkbox.
  • When a user clicks on an indeterminate checkbox it checks all the checkboxes in the group
  • The next click on a indeterminate checkbox unchecks all the checkboxes in the group

Keyboard

  • A keyboard can interact with the checkboxes via the browsers natural tab order.

Screen reader

  • A screen reader interacts with checkboxes similarly to a keyboard through it’s natural tab order
  • Upon choosing checkbox, a screen reader will read out “checked”
  • Screen readers will read out the checkbox set label, checkbox set description text, then each individual checkbox label