Checkboxes are small, square decision making components used for optional choice or multi-selectable lists.


Checkboxes are designed to be used for "yes" and "no" interactions, or interactions where a choice is optional. Use Checkbox for interactions when a multi-select list is needed.

For single choice interactions, please consider Radio Button or Segmented Control. The key difference between a Checkbox and Radio is Radios must always have something active, whereas the Checkbox utility is optional.

For "on" and "off" interactions, also consider Switch.


  • "Yes" and "no" interactions
  • Boolean
  • Workflows where multi-selection is needed
  • Form elements



Keyboard navigation

SpaceToggle the component's checked value.
SpaceToggle component's checked value.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of component.

Writing and copy

Keep labels for Checkboxes simple and succinct. Do not use contractions, such as "you're", "aren't", "can't", and "haven't" for Checkbox labels in order to reduce confusion. Avoid writing Checkbox text as a question.

A label for a Checkbox can denote its action as additive or subtractive. For example:

  • Save info for later (additive)
  • Invite me to the user testing group (additive)
  • Delete locally after upload (subtractive)
  • Remove user metadata (subtractive)
Do Checkbox writing
Do stay concise with Checkbox labels.
Avoid Checkbox writing
Avoid long Checkbox labels, and avoid forming the text as a question.

API reference





Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.