Use a toggle switch for one immediate reversible on/off setting, a checkbox group for independent submitted choices, a radio group for one visible form answer, and a segmented control for a compact local mode or view.
Use a toggle switch for one immediate reversible on/off setting, a checkbox group for independent submitted choices, a radio group for one visible form answer, and a segmented control for a compact local mode or view.
Practice the judgment: Imagine this situation: Using a switch to queue account deletion, file removal, payment, publishing, or another destructive command. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Toggle switch | Checkbox group | Radio group | Segmented control |
|---|---|---|---|---|
| UI or UX | UI + UX - Immediate binary setting control | UI + UX - Multiple-choice form control | UI + UX - Single-choice form control | UI + UX - Compact mode selector |
| UI guidance | Give each control a clear label and visible state. | 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 the person reach a clear task outcome. | Avoid using segments for unrelated pages, hidden content sections, destructive actions, or choices that need long explanation. |
| 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. | Allowing several options in the group to appear active at once. | 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. | Exactly one selected option state. | 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. |