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.

CheckboxesRadio buttonsSwitches
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.