Checkbox

Use checkboxes to allow users to select multiple options from a list or toggle a single option on or off.

Status

Component checklist

Component (RN)

React Native Component Status

Published

Figma (RN)

Figma Component Status

Published

Code (Web)

HTML/CSS Code

Published

Figma (Web)

Figma Component Status

Published

Key points

  • Checkboxes allow users to select multiple options from a group of related items
  • Checkbox groups should always be displayed vertically
  • Each checkbox can be toggled on or off independently
  • Each checkbox labels have an optional hint text field associated with its label
  • The label and space around the checkbox are the hit state for the checkbox
  • Checkboxes with more than one option are contained in a fieldset with a legend as a title
  • Checkboxes with only one option do not need to be contained in a fieldset
  • Use radio buttons if you want to limit users to select only one option from a list
  • Use this input type along with other form guidelines

Use checkboxes to allow users to select multiple options from a list or toggle a single option on or off.

View the form guidelines on when to use a fieldset with a single checkbox or a group of checkboxes.