E3.10.1binary choice switch or radiodesign

A two-way choice is a switch or a pair of radios

Aliases: binary choice · two alternatives · on/off versus A/B

What it is

When there are exactly two options and one must be taken, the control collapses to a switch or a pair of radios — not a select, not a stack of segments, not a lone checkbox. The split is not by count but by the shape of the proposition: a switch is “this property on or off” (mute, night mode); a pair of radios is “one of two named alternatives” (pickup / delivery, English / Chinese UI). Count-is-two only shrinks the space; which shell to use still depends on whether the two items are ends of one property or two peer nouns.

A checkbox is wrong here because it allows none, or hints that more ticks might exist. A select hides comparison of two words for no gain.

Why it happens

A two-way decision is already light; the widget can make it heavy or crooked. A select demands an open before the other item is seen, hiding two words that could have sat in parallel. A single checkbox treats “unticked” as the second item, but unticked has no name, so people do not know which alternative emptiness equals. A switch compresses the two into one object’s truth value; if the two are really nouns (“credit / debit”), the off end has no label and the other item vanishes perceptually.

A visible pair of radios keeps both nouns in view; exclusion and requiredness sit on the dots. A switch makes “off” the default other end, which fits a property with a natural off. Same count, different proposition structure; the shells do not swap.

Where it stops holding

When one of the two is costly (delete account / keep it), even radios should pull the dangerous item apart visually; equal dots with copy as the only warning are not enough. Immediate properties still use a switch, submit-with-form pairs still use radios — the clock rule holds at count two. A seeming pair that can be empty (“male / female” plus prefer-not-to-say) is no longer two-way; add a third or change control. Two switches labelled Option A and Option B can both go on or both off: that is two independent binaries, not a two-way choice.

Applying it

  • Write the two names. If they rewrite as “X: on/off,” use a switch; if two nouns must be listed, use a pair of radios.
  • Do not pack two items in a select, and do not let an unticked checkbox impersonate the second item.
  • If the pair submits with a form, use radios; do not reach for a switch just because there are only two.
  • How to check: hide the widget, leave the copy, ask “what if I pick nothing / what is the other item called.” If the other item has no name, a switch or checkbox hid the alternative.

Related

  • Within the group: E3.10.2 Lay out a small set · E3.10.3 Large sets need search and grouping, not a long select
  • Adjacent: E3.02 Radio Buttons · E3.03 Switches · E3.04 Choosing Switch versus Checkbox
  • Search terms: binary choice · two radios · on-off versus alternatives

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E3.10.1