Radio
Radio is a form control for choosing exactly one option from a set.
Preview
One choice out of a visible set. Every option stays on screen and exactly one is filled. On iOS this is a Picker in inline style, on Android a RadioButton group.
Click one, or tab to the group and use the arrow keys. The whole row is the target: the control is 44 of tap target around a 28 disc, so the row clears the minimum even though the visible circle is smaller. Content takes the remaining 280 and wraps rather than pushing the radio off the row. A radio never ships alone, because a single one cannot be turned off again, which is why the preview is a group.
States
Three states crossed with one boolean, six variants. Two circles do all of it.
The ring is not a stroke. It is a 24 circle in bg/white-0 on a 28 disc, and the ring is the disc showing round the edge. Selecting shrinks that circle to 12. Pressed while unselected turns the disc brand blue, the only unselected radio in the set that is blue. Disabled while unselected has no centre circle, a solid grey disc rather than a grey ring. These six are there to be read, not operated, so nothing here takes a click.
Label row
The radio with a title, an optional description, and a side to sit on. The whole row is the tap target. A group of them is how the control actually ships.
Align moves the radio from one end to the other, nothing else changes. Turning the description off drops the 14/20 line, and the 44 target sets the floor the row cannot go under. The title is 18/28 Semi Bold, larger than the 16 a settings row uses, so a long option name eats the width fast. Both rows in each frame stay selected on purpose: they are one variant shown twice, not two options.
Properties
Two axes on the control, four knobs on the label row.
There is no group component. A radio group is however many label rows you place, and keeping exactly one Active is your job. Nothing carries a name or a value, so the wiring lives in code. There is no Hover: State covers Default, Pressed and Disabled only.
Tokens
Six values, and the pressed blue is the one that behaves oddly.
Pressed reverses direction between themes: in light brand/dark steps down from the base, in dark it steps up. More contrast either way, but pressed is not simply darker and you cannot fake it with a filter. The centre circle is bg/white-0, not transparency, so an unselected radio on any other surface shows a disc of the wrong tone.
Guidelines
Exactly one filled, and every option on screen. If the user cannot see all the choices at once, the control is a Dropdown or a Picker, not this.
Two filled is a Checkbox wearing the wrong shape. Round means one, square means any number, and people read that before they read the label.
Use it for two to five options that fit on screen together and deserve to be compared. One option is not a choice, and past five a list or a picker wins. Always start with one selected, and never use a radio for an action.