Checkbox
Last Updated on Sep 29, 2022
Checkboxes allow users to make binary choices.

Component Variants

Design Principles

  • Checkboxes have three possible states: selected, unselected, and partial. Partial selection occurs when a parent has some of its children checkbox(es) selected.
  • Checkboxes can be single or grouped. Groups can have a parent child relationship or just sit next to each other.
  • If a user needs to perform additional steps before changes become effective a checkbox is the right component choice. If the change is immediate, a switch is the right choice.

For more information about when to use checkboxes or toggles, check out this article on UX Planet.

Do's and Don'ts

Use if you have a single binary choice.
Use if you have a group of related options that can be turned on or off.
Don’t use if a binary choice has two or more options. Use radios.
Don’t use if an action has to be executed immediately. Use a switch.