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
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
ExperimentalElement offered for testing and feedback. Not intended for use in production.
Documentation
PublishedElement can be used in production

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 for the checkbox component.

The checkbox component is composed of two parts:

  1. A checkbox
  2. An option with a label

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

Articles

Checkboxes versus Radio Buttons

Read the Nielsen Norman Group's guidance.

Feedback