Behavior comparison
Checkbox vs Switch
Decisive difference
Checkbox records an independent choice that may be reviewed before a form is submitted; Switch expresses one setting as on or off.
Choice criteria, links and sources
- CheckboxChoose Checkbox if the user selects any number of options or agrees to a statement, such as accepting terms.Open entry Checkbox
- SwitchChoose Switch if a single setting is turned on or off, such as notifications or dark mode.Open entry Switch
See the nine dimensionsSee the sources
Choices and binary states
Try it
Is this an independent value, one exclusive grouped choice, or an on/off setting?
Checkbox
Shared trial context
A settings flow asks the user to make a choice and understand whether it is independent, exclusive, or an on/off setting.
Checkbox
Mission
Checkbox
Toggle two preferences with Space, then use the parent checkbox to demonstrate the mixed state.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Each labeled option exposes its own checked state and can be submitted with the form.
- Edge case
- The Select all parent becomes indeterminate when only some child choices are checked.
Switch
Mission
Switch
Toggle the setting with pointer and Space, verify the state announcement, and follow the stated save behavior.
Applies every change as you type.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The labeled switch exposes its current on or off state while the product makes save timing explicit.
- Edge case
- If persistence fails, the switch returns to its prior state and an inline status explains the failure.
What this example shows
Checkbox represents an independent checked choice; Radio group enforces one choice, while Switch expresses an on or off state. Commit timing is product policy, not the semantic distinction.
Which fits your need?
Checkbox
Selecting any number of independent options
Switch
Turning an account setting on or off
Difference and sources
Checkbox represents an independent checked choice; Radio group enforces one choice, while Switch expresses an on or off state. Commit timing is product policy, not the semantic distinction.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Control
The interactive element that receives input and exposes state.
Decision
Family question
Is this an independent value, one exclusive grouped choice, or an on/off setting?
Three criteria to choose
- Use case
Checkbox
Selecting any number of independent options
Switch
Turning an account setting on or off
- Interactivity
Checkbox
Toggles its own checked state; multiple checkboxes may be selected independently.
Switch
Immediately toggles and persists a setting; it is not a pending choice awaiting form submission.
- Trigger
Checkbox
Click, tap, or Space on the checkbox or its associated label.
Switch
Click, tap, or Space on the switch or its label.
Nine dimensions
- Trigger
Checkbox
Click, tap, or Space on the checkbox or its associated label.
Switch
Click, tap, or Space on the switch or its label.
- Modality
Checkbox
Non-modal independent boolean or mixed form value.
Switch
Non-modal control for a setting that takes effect immediately.
- Placement
Checkbox
Inline with its persistent label, often in a vertical group.
Switch
Inline with a persistent label and a clearly visible on/off state.
- Interactivity
Checkbox
Toggles its own checked state; multiple checkboxes may be selected independently.
Switch
Immediately toggles and persists a setting; it is not a pending choice awaiting form submission.
- Focus
Checkbox
Each native checkbox is a visible focus stop and its label expands the pointer target.
Switch
The switch is one visible focus stop and its label activates the same control.
- Dismissal
Checkbox
Not applicable: the checkbox persists until the user toggles it or the form resets.
Switch
Not applicable: the setting persists until toggled again; a failed update restores the prior state.
- Accessible role
Checkbox
input[type=checkbox]
Switch
switch
- Use case
Checkbox
Selecting any number of independent options
Switch
Turning an account setting on or off
- Mobile behavior
Checkbox
Make the full label row a generous touch target without hiding the checked state.
Switch
Use a broad label target and preserve a clear state in both color schemes.
| Dimension | CheckboxCheckbox | SwitchSwitch |
|---|---|---|
| Trigger | Click, tap, or Space on the checkbox or its associated label. | Click, tap, or Space on the switch or its label. |
| Modality | Non-modal independent boolean or mixed form value. | Non-modal control for a setting that takes effect immediately. |
| Placement | Inline with its persistent label, often in a vertical group. | Inline with a persistent label and a clearly visible on/off state. |
| Interactivity | Toggles its own checked state; multiple checkboxes may be selected independently. | Immediately toggles and persists a setting; it is not a pending choice awaiting form submission. |
| Focus | Each native checkbox is a visible focus stop and its label expands the pointer target. | The switch is one visible focus stop and its label activates the same control. |
| Dismissal | Not applicable: the checkbox persists until the user toggles it or the form resets. | Not applicable: the setting persists until toggled again; a failed update restores the prior state. |
| Accessible role | input[type=checkbox] | switch |
| Use case | Selecting any number of independent options | Turning an account setting on or off |
| Mobile behavior | Make the full label row a generous touch target without hiding the checked state. | Use a broad label target and preserve a clear state in both color schemes. |