Checkbox
Checkbox is one of the selection controls that lets users select multiple items from a list.
1. Alike components
Checkboxes are often confused with radio buttons and switches in some use cases. The guidance below helps to differentiate the difference.
| Checkboxes | Radio buttons | Switches | |
|---|---|---|---|
| At least one | At least two | Only one (on or off) | |
| Are the choices mutually exclusive? | No | Yes | N/A (independent) |
| Does the choice need a submission to take effect? | Yes | Yes | No |
| Is there an un-checked state? | Yes | Yes | No (always on or off) |
| Can you toggle the state at the same place? | Yes | No | Yes |
1.1 Checkbox vs radio buttons
Checkboxes allow user to select multiple options. Radio button does not allow user to select more than one option.
Do
Checkboxes allow multiple selections.
Don't
Don’t use radio buttons when users can select multiple options. Use checkboxes.
Do
Users can select and un-select on the same item when there is only one option.
1.2 Checkbox vs switches
Placeholder is used to reserve a space for the content. It disappears once users start to type. Do not put important information like label, format, unit, or character limit in a placeholder.
Do
Use checkboxes when the options are related to each other.
Don't
Don’t use switches when the options are related to each other.
Do
Use checkboxes when submission is need to take effect.
Don't
Don’t use switches if submissions are required. Switch takes effect on action.