Last Updated on Sep 29, 2022
Checkboxes allow users to make binary choices.
- 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.
Table of ContentsComponent VariantsDesign PrinciplesDo's and Don'ts