Checkbox

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

Overview

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.

Usage

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

Sample

Accessibility

Keyboard navigation

KeyFunction
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

Properties

Styles

Events

Methods

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