Behavior comparison
Checkbox vs Radio group
Decisive difference
Each Checkbox is an independent choice; in a Radio group, selecting one option clears the previous one.
Choice criteria, links and sources
- CheckboxChoose Checkbox if the user may check zero, one, or several options.Open entry Checkbox
- Radio groupChoose Radio group if exactly one option must be selected among visible alternatives.Open entry Radio group
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.
Radio group
Mission
Radio group
Enter the group with Tab, choose Express with arrows, and verify Standard is cleared.
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
- One delivery option is checked beneath a shared visible legend.
- Edge case
- When a required group has no selection, submission focuses the group and explains that one method must be chosen.
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
Radio group
Choosing one shipping method from visible alternatives
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
Radio group
Choosing one shipping method from visible alternatives
- Interactivity
Checkbox
Toggles its own checked state; multiple checkboxes may be selected independently.
Radio group
Selection is exclusive; managed arrow-key movement changes the active option.
- Trigger
Checkbox
Click, tap, or Space on the checkbox or its associated label.
Radio group
Click or tap an option; Tab enters the group and arrow keys move the choice.
Nine dimensions
- Trigger
Checkbox
Click, tap, or Space on the checkbox or its associated label.
Radio group
Click or tap an option; Tab enters the group and arrow keys move the choice.
- Modality
Checkbox
Non-modal independent boolean or mixed form value.
Radio group
Non-modal form control for exactly one value in a named group.
- Placement
Checkbox
Inline with its persistent label, often in a vertical group.
Radio group
Grouped inline or stacked options under one shared question.
- Interactivity
Checkbox
Toggles its own checked state; multiple checkboxes may be selected independently.
Radio group
Selection is exclusive; managed arrow-key movement changes the active option.
- Focus
Checkbox
Each native checkbox is a visible focus stop and its label expands the pointer target.
Radio group
The native group behaves as one tab stop once a value is selected, with visible focus on the active radio.
- Dismissal
Checkbox
Not applicable: the checkbox persists until the user toggles it or the form resets.
Radio group
Not applicable: selection remains until another radio is chosen or the form resets.
- Accessible role
Checkbox
input[type=checkbox]
Radio group
fieldset > input[type=radio]
- Use case
Checkbox
Selecting any number of independent options
Radio group
Choosing one shipping method from visible alternatives
- Mobile behavior
Checkbox
Make the full label row a generous touch target without hiding the checked state.
Radio group
Prefer stacked options with large label targets when labels are not extremely short.
| Dimension | CheckboxCheckbox | Radio groupRadio group |
|---|---|---|
| Trigger | Click, tap, or Space on the checkbox or its associated label. | Click or tap an option; Tab enters the group and arrow keys move the choice. |
| Modality | Non-modal independent boolean or mixed form value. | Non-modal form control for exactly one value in a named group. |
| Placement | Inline with its persistent label, often in a vertical group. | Grouped inline or stacked options under one shared question. |
| Interactivity | Toggles its own checked state; multiple checkboxes may be selected independently. | Selection is exclusive; managed arrow-key movement changes the active option. |
| Focus | Each native checkbox is a visible focus stop and its label expands the pointer target. | The native group behaves as one tab stop once a value is selected, with visible focus on the active radio. |
| Dismissal | Not applicable: the checkbox persists until the user toggles it or the form resets. | Not applicable: selection remains until another radio is chosen or the form resets. |
| Accessible role | input[type=checkbox] | fieldset > input[type=radio] |
| Use case | Selecting any number of independent options | Choosing one shipping method from visible alternatives |
| Mobile behavior | Make the full label row a generous touch target without hiding the checked state. | Prefer stacked options with large label targets when labels are not extremely short. |