Radio Button

The hard part on screen isn't listing the options. It's telling someone that only one can be picked, before they pick. Put "select one" in helper text and whoever skips the text clicks two. Then the next screen throws an error, and they learn the rule after acting instead of before.

Build a plan chooser out of square check boxes and this happens for real. Somebody ticks both the team plan and the business plan, hits continue, and a support message arrives asking why the total looks wrong. To the people who built it, "pick one" was obvious. The screen never said so. The fix isn't a longer sentence in the helper text — it's a control whose shape carries the rule, so the wrong action isn't available to take.

The name comes from the preset buttons on an old car radio. Six of them sit in a row, and pressing one pops out whichever was pressed before. Nothing had to be explained in words: putting a finger on it showed that only one stays down. The on-screen version does the same job.

Several options belonging to the same question form one group, and inside that group exactly one circle is ever filled. Choosing another clears the previous choice. The user never performs a separate action to switch something off, and that property is the whole point of the component. Nothing in the group can be cleared on its own, so the only way to change the answer is to give a different one.

Five rules make it work.

1. Give the group a question. Three bare options leave no way to know what's being decided. The word "Plan" has to sit above the three.
2. Preselect a default. Left blank, some people pass the question by. A preselected option does read as a recommendation, so when the value affects a judgment, decide deliberately which one gets that position. On a plan chooser, the middle tier preselected will outsell the same tier sitting unselected.
3. Keep in mind that there's no going back to nothing selected. If returning to an unset state matters, add an explicit "none" option.
4. Keep the count between two and about seven. One option leaves nothing to choose, and twelve laid out flat means a single question eats half the screen. At that size, switch to a collapsed select or to a combobox that narrows candidates as you type.
5. Make the label clickable, not just the circle. The circle is about 20 pixels across and the text beside it is much wider. Without the label, phone users tap and miss two or three times.

Keyboard behavior differs from other inputs too. Tab jumps over the group as a unit, and arrow keys move between options inside it. Wire tab to every option and a six-option question takes six tab presses to get past. Screen readers lean on the grouping as well. Announced properly, the group reads as a question with its options numbered — option two of three — which is how someone who can't see the layout knows how many choices there are.

Decide when the choice takes effect as well. A toggle, which flips between on and off, belongs where the change applies the instant it's pressed. Radio buttons usually apply when a save button is pressed. Put them on a screen with no save button and people can't tell what was stored.

Values that can't be two things at once are the home for this component: plan, shipping method, payment method. Single-answer survey questions and settings screens with three or fewer modes belong here as well.

At Pagedeck, document visibility takes this shape. Public, team only, and private sit in a row, and choosing one clears the others. The values are mutually exclusive and there are only three, so they stay laid out instead of collapsed. The count decides the layout too: three stacked rows with labels beside them read faster than three lines inside a dropdown, and they fit on a phone without scrolling.

Four places call for something else.

1. Questions where several answers can be true. If all three notification types can be on, that's a checkbox.
2. Questions with more than about eight options. Country names get collapsed or made searchable.
3. Settings that are a single on-or-off. Two radio buttons here turn one toggle's job into two controls, and the pair takes twice the vertical space to say the same thing.
4. Values whose list can't be written in advance. Names and search terms belong in a text input.

"Only one of these can be true and it's built as checkboxes. It needs to be radios."

The shape of the screen contradicts the rule, so the shape should change.

"Twelve options eats the whole screen. Let's collapse it into a select."

Same question, but the count pushes it to a different component.

"What's the default? If it starts with nothing selected, people scroll past it."

Leaving it blank is also a decision, and it shows up in completion rate — the question with no default is the one people leave unanswered.

When Noa reworked the visibility screen at Pagedeck, she set team only as the default. Making public the default produces documents that leak outside by accident, and making private the default means changing it by hand every time in a product built for working together.

Theo, implementing it, made the label area clickable and got the arrow keys moving through the three options. Without those two details the screen looks identical and is harder to use on a phone and with a keyboard.

The most common mistake is assuming collapsing options is always tidier. Fewer lines on screen does look more orderly. But a collapsed list adds an action, and nothing about the candidates is visible until it's opened. With three options, laying them out removes that action and lets all three be compared side by side. Under about four options, laying them out almost always wins. Miss the distinction and even three-option questions get collapsed, so someone comparing three plans opens and closes the same list three times.

The second is treating a blank default as neutral. Preselecting one looks like nudging people toward it, so selecting nothing feels fairer. But blank questions are easy to skip. Throwing an error on the next screen and sending people back loses some of them there, and that loss runs larger than the cost of a default that wasn't ideal. When the nudge is the worry, the answer isn't a blank group — it's choosing the most common or the safest value and writing one line beside it explaining why.