UX Patterns Guide
Back to compare picker

Toggle switch vs Checkbox group vs Radio group vs Segmented control

Prefer a toggle switch when a single named setting has exactly two states, can be applied immediately, and can be reversed without confirmation.

Toggle switch live exampleCheckbox group live exampleRadio group live exampleSegmented control live example

Decision dimensions

Dimension Toggle switchCheckbox groupRadio groupSegmented control
UI or UX UI + UX - Immediate binary setting controlUI + UX - Multiple-choice form controlUI + UX - Single-choice form controlUI + UX - Compact mode selector
UI guidance Render one switch with a stable visible label, clear on/off state, visible focus, accessible state, and optional state text when the effect is not obvious.Render visible native checkboxes with labels, checked states, group legend, select-all-that-apply hint, and group validation state.Render a fieldset/legend with visible native radio options, selected state, focus state, optional hints, and group-level validation.Render a compact horizontal group with two to four adjacent segments, one selected state, visible focus, and stable sizing.
UX guidance Let users change one reversible setting immediately and understand the applied effect.Let users choose independent options and review the selected set before submitting.Help users compare the available options and choose exactly one without opening an extra control.Help users switch a local mode, view, filter, sort, or presentation immediately without navigation or form submission.
Good UI A notifications switch with a stable Notifications label, On or Off state text, large hit target, visible focus, and immediate applied effect.Visible checkboxes with large hit areas, persistent labels, group legend, and aligned helper text.Visible native radio options with a clear legend, selected state, focus state, and helper text.Two to four adjacent segments with a clear selected segment, visible focus ring, and readable labels that fit on one row.
Bad UI A red switch labelled Delete account that behaves like an instant destructive command.Tiny custom boxes that are hard to target.Custom circles that do not show focus or selected state clearly.Many cramped segments with truncated text.
Good UX Turning the switch on immediately enables the setting and announces the applied effect.Clicking the label toggles the checkbox.Exactly one option is selected at a time and labels are clickable.Selecting a segment changes a nearby local mode, filter, or view immediately.
Bad UX A switch appears to change but requires a hidden Save button before anything happens.Using checkboxes for mutually exclusive choices.Using radios for choices where multiple selections are allowed.Using segments for unrelated destinations.
Best fit A single setting, feature, preference, or hardware-like control has two clear states.Users can choose zero, one, or many options.Users must choose exactly one option.There are a few mutually exclusive modes.
Avoid when The action is destructive, one-time, legal, financial, or needs confirmation.Only one option can be selected.Users can choose multiple options.Options are full content sections needing tab semantics.
Required state Off state.Unchecked option state.No selection state for required unanswered groups.Default selected segment.
Accessibility burden Use role switch with aria-checked or a native checkbox implementation that exposes the checked state.Use programmatic labels for every checkbox.Use a programmatic group label through fieldset/legend or an accessible radiogroup name.Expose selected or pressed state and the group name.
Common misuse Using a switch to delete, publish, pay, submit, or trigger another one-time command.Using checkboxes for mutually exclusive choices.Using radios for independent choices where several answers can be true.Using segments for unrelated page navigation.

Toggle switch

UI or UX
UI + UX - Immediate binary setting control
UI guidance
Render one switch with a stable visible label, clear on/off state, visible focus, accessible state, and optional state text when the effect is not obvious.
UX guidance
Let users change one reversible setting immediately and understand the applied effect.
Good UI
A notifications switch with a stable Notifications label, On or Off state text, large hit target, visible focus, and immediate applied effect.
Bad UI
A red switch labelled Delete account that behaves like an instant destructive command.
Good UX
Turning the switch on immediately enables the setting and announces the applied effect.
Bad UX
A switch appears to change but requires a hidden Save button before anything happens.
Best fit
A single setting, feature, preference, or hardware-like control has two clear states.
Avoid when
The action is destructive, one-time, legal, financial, or needs confirmation.
Required state
Off state.
Accessibility burden
Use role switch with aria-checked or a native checkbox implementation that exposes the checked state.
Common misuse
Using a switch to delete, publish, pay, submit, or trigger another one-time command.

Checkbox group

UI or UX
UI + UX - Multiple-choice form control
UI guidance
Render visible native checkboxes with labels, checked states, group legend, select-all-that-apply hint, and group validation state.
UX guidance
Let users choose independent options and review the selected set before submitting.
Good UI
Visible checkboxes with large hit areas, persistent labels, group legend, and aligned helper text.
Bad UI
Tiny custom boxes that are hard to target.
Good UX
Clicking the label toggles the checkbox.
Bad UX
Using checkboxes for mutually exclusive choices.
Best fit
Users can choose zero, one, or many options.
Avoid when
Only one option can be selected.
Required state
Unchecked option state.
Accessibility burden
Use programmatic labels for every checkbox.
Common misuse
Using checkboxes for mutually exclusive choices.

Radio group

UI or UX
UI + UX - Single-choice form control
UI guidance
Render a fieldset/legend with visible native radio options, selected state, focus state, optional hints, and group-level validation.
UX guidance
Help users compare the available options and choose exactly one without opening an extra control.
Good UI
Visible native radio options with a clear legend, selected state, focus state, and helper text.
Bad UI
Custom circles that do not show focus or selected state clearly.
Good UX
Exactly one option is selected at a time and labels are clickable.
Bad UX
Using radios for choices where multiple selections are allowed.
Best fit
Users must choose exactly one option.
Avoid when
Users can choose multiple options.
Required state
No selection state for required unanswered groups.
Accessibility burden
Use a programmatic group label through fieldset/legend or an accessible radiogroup name.
Common misuse
Using radios for independent choices where several answers can be true.

Segmented control

UI or UX
UI + UX - Compact mode selector
UI guidance
Render a compact horizontal group with two to four adjacent segments, one selected state, visible focus, and stable sizing.
UX guidance
Help users switch a local mode, view, filter, sort, or presentation immediately without navigation or form submission.
Good UI
Two to four adjacent segments with a clear selected segment, visible focus ring, and readable labels that fit on one row.
Bad UI
Many cramped segments with truncated text.
Good UX
Selecting a segment changes a nearby local mode, filter, or view immediately.
Bad UX
Using segments for unrelated destinations.
Best fit
There are a few mutually exclusive modes.
Avoid when
Options are full content sections needing tab semantics.
Required state
Default selected segment.
Accessibility burden
Expose selected or pressed state and the group name.
Common misuse
Using segments for unrelated page navigation.
Decision rules
  • Prefer a toggle switch when a single named setting has exactly two states, can be applied immediately, and can be reversed without confirmation.
  • Prefer a checkbox group when users answer a form question by selecting zero, one, or several independent options and reviewing those values before submit.
  • Prefer a radio group when exactly one visible option must be chosen from a short set, especially when each option needs explanation or validation as a form answer.
  • Prefer a segmented control when two to four choices switch a nearby local view, filter, sort, density, or presentation mode rather than controlling a persistent setting.
  • Do not use a switch for destructive commands, navigation, legal consent, checkout agreement, one-time actions, or choices that need a confirmation dialog.
  • Do not use a switch for three or more values such as off, weekly, and daily; use radios, segmented controls, select, or another choice pattern that exposes every value.
  • Do not use a switch when the change is only staged for a later Save button unless the interface clearly uses a checkbox or form control and communicates review-before-submit.
  • Keep the switch label stable; only the on/off state, status text, and resulting effect should change after activation.
  • Expose switch state programmatically with role switch and aria-checked, or use a native checkbox implementation that accurately reflects the checked value.
  • If the service takes time to apply the setting, show pending, failed, unavailable, disabled, or read-only state instead of pretending the setting has already completed.
Inspect live examples
Toggle switchCheckbox groupRadio groupSegmented control
Failure modes
  • Using a switch to queue account deletion, file removal, payment, publishing, or another destructive command.
  • Changing the label from Enable notifications to Disable notifications so the controlled object becomes unstable.
  • Displaying a switch for multi-level choices while hiding the actual options from users.
  • Letting a switch appear active even though the required dependency, permission, or backend service is unavailable.
  • Using a switch in a submitted form where users expect to review all answers before committing.
  • Treating a compact segmented mode switcher as a persistent on/off setting.