components icon

Checkbox

Checkboxes allow a user to select multiple options from a category. A checkbox can also be used to display a single option that may require additional acceptance or confirmation prior to submission.

Status

PublishedElement can be used in production
Documentation
PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Web Components
In backlogElement is in backlog
React
React
ExperimentalElement offered for testing and feedback. Not intended for use in production.
Angular
Angular
In progressElement design and development in progress

What's new

Checkboxes now incorporate new sizes, new colors, and a simplified focus state for readability and accessibility. Also, the focus target was extended, allowing users to select or unselect the checkbox and its associated label.

When to use

Checkboxes and radio buttons are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.

ComponentUse cases
CheckboxIf a user can select multiple options, use checkboxes. Checking one box does not uncheck others in the same list. A checkbox could also be used to confirm acceptance, as it allows a user to select and deselect the box before submission.
Radio buttonIf the question presents a binary option, or if the user must select only one option from a list of five or fewer, use radio buttons instead of checkboxes.

Anatomy

Checkboxes may have a group label (fieldset/legend) and a checkbox label that corresponds to the checkbox itself, depending on which variant you choose. A checkbox can either be selected, unselected, or inactive. See behaviors and states

A diagram showing the parts of the checkbox component.

The checkbox component is composed of two parts:

  1. A checkbox
  2. An option with a label
Diagram of checkbox group anatomy.

A checkbox group can have up to four parts:

  1. A group label (called a legend or fieldset in code)
  2. A checkbox
  3. A text label
  4. An error message

Radio button

Feedback