vocab.design

component · forms · selection

Radio group

also called radio buttons (community), option group (community)

A set of mutually exclusive options, each with its own label and control, exactly one of which can be chosen.

The unit is the group, not the button, which is why the entry is filed under the plural name. One radio on its own is a bug rather than a minimal case: once it is chosen there is no gesture that unchooses it, so an interface that offers a single radio has offered a decision the reader cannot take back. If the question genuinely has a “neither” answer, the group needs a third option that says so.

Against a checkbox the difference is cardinality and it is carried by the shape. Circles mean pick one, squares mean pick any number, and readers trust the glyph over the instructions above it, so a set of squares where only one answer is legal will be misread every time. The two are also usually asking different kinds of question: a checkbox set collects independent facts, a radio group settles one.

Against a segmented control the difference is register rather than logic. Both hold exactly one choice from a small set. A segmented control packs two to five options into one control, carries no group label of its own, and normally applies instantly: it is switching a view. A radio group spreads its options down the page with room for a description under each, is introduced by the question it answers (a fieldset and its legend, or role="radiogroup" named by the heading already on screen), and usually waits for a Save or a Continue. A selection card is a radio group grown up: the same exclusivity with a whole panel of content as the label.

The keyboard behaviour is the real tell, and it is what a hand-rolled group most often gets wrong. The whole group is one tab stop: Tab moves into the checked option and the next Tab leaves the group entirely, while the arrow keys move between the options, which is roving tabindex doing its work. Inside a radio group the arrows do not merely highlight, they choose, so selection follows focus is not a design decision here but a platform convention. A group that waits for Enter after the arrow will confuse everyone, and one that puts every option in the tab sequence charges a keyboard reader five presses to walk past a question they had already answered.

Which word?

If you wantsay
one of several, each option labelled and visibleradio group
each option is independently on or offcheckbox
individual field labels make no sense on their owngroup label
choosing between options drawn as big tilesselection card
two to five exclusive options, all visible at oncesegmented control

Related

See also: Selection follows focus

Implementations

Specimens illustrate the concept; for production use, start here.

aria-apgRadio Group pattern
materialRadio button
radixRadio Group

Sources