Behavior comparison
Radio group vs Switch
Decisive difference
Radio group picks exactly one value among visible alternatives; Switch turns one setting on or off with no other alternative.
Choice criteria, links and sources
- Radio groupChoose Radio group if the user picks one option among several named alternatives, such as a shipping method.Open entry Radio group
- SwitchChoose Switch if the only question is whether one setting is on or off.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?
Radio group
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.
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.
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
Radio group permits exactly one choice; Checkbox choices are independent, while Switch expresses one on or off setting.
Which fits your need?
Radio group
Choosing one shipping method from visible alternatives
Switch
Turning an account setting on or off
Difference and sources
Radio group permits exactly one choice; Checkbox choices are independent, while Switch expresses one on or off setting.
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.
Group label
A shared name that explains the choice represented by the group.
Decision
Family question
Is this an independent value, one exclusive grouped choice, or an on/off setting?
Three criteria to choose
- Use case
Radio group
Choosing one shipping method from visible alternatives
Switch
Turning an account setting on or off
- Interactivity
Radio group
Selection is exclusive; managed arrow-key movement changes the active option.
Switch
Immediately toggles and persists a setting; it is not a pending choice awaiting form submission.
- Trigger
Radio group
Click or tap an option; Tab enters the group and arrow keys move the choice.
Switch
Click, tap, or Space on the switch or its label.
Nine dimensions
- Trigger
Radio group
Click or tap an option; Tab enters the group and arrow keys move the choice.
Switch
Click, tap, or Space on the switch or its label.
- Modality
Radio group
Non-modal form control for exactly one value in a named group.
Switch
Non-modal control for a setting that takes effect immediately.
- Placement
Radio group
Grouped inline or stacked options under one shared question.
Switch
Inline with a persistent label and a clearly visible on/off state.
- Interactivity
Radio group
Selection is exclusive; managed arrow-key movement changes the active option.
Switch
Immediately toggles and persists a setting; it is not a pending choice awaiting form submission.
- Focus
Radio group
The native group behaves as one tab stop once a value is selected, with visible focus on the active radio.
Switch
The switch is one visible focus stop and its label activates the same control.
- Dismissal
Radio group
Not applicable: selection remains until another radio is chosen or the form resets.
Switch
Not applicable: the setting persists until toggled again; a failed update restores the prior state.
- Accessible role
Radio group
fieldset > input[type=radio]
Switch
switch
- Use case
Radio group
Choosing one shipping method from visible alternatives
Switch
Turning an account setting on or off
- Mobile behavior
Radio group
Prefer stacked options with large label targets when labels are not extremely short.
Switch
Use a broad label target and preserve a clear state in both color schemes.
| Dimension | Radio groupRadio group | SwitchSwitch |
|---|---|---|
| Trigger | Click or tap an option; Tab enters the group and arrow keys move the choice. | Click, tap, or Space on the switch or its label. |
| Modality | Non-modal form control for exactly one value in a named group. | Non-modal control for a setting that takes effect immediately. |
| Placement | Grouped inline or stacked options under one shared question. | Inline with a persistent label and a clearly visible on/off state. |
| Interactivity | Selection is exclusive; managed arrow-key movement changes the active option. | Immediately toggles and persists a setting; it is not a pending choice awaiting form submission. |
| Focus | The native group behaves as one tab stop once a value is selected, with visible focus on the active radio. | The switch is one visible focus stop and its label activates the same control. |
| Dismissal | Not applicable: selection remains until another radio is chosen or the form resets. | Not applicable: the setting persists until toggled again; a failed update restores the prior state. |
| Accessible role | fieldset > input[type=radio] | switch |
| Use case | Choosing one shipping method from visible alternatives | Turning an account setting on or off |
| Mobile behavior | Prefer stacked options with large label targets when labels are not extremely short. | Use a broad label target and preserve a clear state in both color schemes. |