Radio

What it is

A control for choosing exactly one option from a small, fully visible set of mutually exclusive choices. Selecting one Radio in a group always deselects whichever was previously selected — the group holds exactly one truth at a time, which is what separates it from Checkbox.

Live example

Exports

Vocabulary

Term	Also called	The system uses
Radio group	Option set, radio list	Radio group

Radio’s own property naming is internally consistent, unlike Checkbox’s. Both the bare Radio component and the Radio + Label composite use Selected=true/false in the Figma library — no split between a Checked atom and a Selected composite the way Checkbox has.

Choose Radio when

The set of options is small — roughly five or fewer — and showing every option helps the reader compare them directly, the same threshold Select draws the opposite fork at.
Exactly one option must be true.

Choose something else when

If you need to…	Use	Why
Offer more than roughly five options	Select	Past that count, the space every option takes up outweighs the benefit of seeing them all at once
Let any number of options be true, including all or none	Checkbox group	Radio enforces exclusivity; Checkbox expresses independence
Capture a single, standalone, immediately-applied setting	Switch	A two-option case needs no group; Switch is the lighter control for exactly one binary decision

Anatomy

#	Part	Required
1	Circle control	Yes
2	Control label	No — see TITAN-RADIO-03 when omitted

Variants, sizes, and states

Confirmed from the Figma library, not source. Selected=true/false × State=Default/ Hover/Disabled/Focused — 8 combinations, on both the bare control and the Radio + Label composite.

Edge and failure states

Situation	What renders	Recovery
No visible label	The circle alone	Must still carry an explicit accessible name — see TITAN-RADIO-03
A group with only one option	Undefined. A choice of one isn’t a choice — see TITAN-RADIO-05.	See Gaps
Disabled and selected	Renders at the disabled opacity applied over the selected fill	No dedicated disabled-selected colour exists as its own token — the two compose
A mandatory group with nothing selected on load	Undefined whether a default selection is required	See TITAN-RADIO-06 and Gaps

Tokens

Composition

Pairs with a control label immediately trailing it (LTR) — see FieldLabel’s control-label vocabulary. A group of Radios is exposed as a set with its own group name, distinct from any individual option’s label — see TITAN-RADIO-02.

A Radio group is a real, decided container, not an ad hoc wrapper. The form-input-radio-group-offset token (-0.5rem) applies specifically to a group’s container, trimming the group’s outer edge so an individual Radio’s own padding doesn’t push the group past a sibling field’s edge. A token existing for this implies the group wrapper is a modeled part of the system, not just a convenient <div>.

For a complete field rather than the bare control, compose through Form’s FormInput with type="radio" — it also auto-selects the first option when no value is given. Unlike Input, Select, and Checkbox, source publishes no named anti-pattern story calling out a hand-assembled RadioGroup specifically; the same composition guidance applies, but with that one difference in evidence — see Open issues.

Content

Rule	✅	❌
Each option label names the choice, not a question	Email	Do you want email?
The group itself carries an instruction or question as its own group label	”Preferred contact method”	A group with no name of its own

Accessibility

Key	Behavior
`Tab`	Moves focus to the group as one stop — not to each Radio individually
`↑` / `↓` or `←` / `→`	Moves the selection among the group’s options

Renders native <input type="radio"> elements sharing one name, which is what makes them mutually exclusive at the platform level.
The group is announced as a set (a fieldset with a legend, or the equivalent grouping role) with its own accessible name, separate from any individual option’s label.

What this component does not handle: deciding whether a selection is required — that belongs to Form validation.

Constraints

ID	Constraint	Rationale
TITAN-RADIO-01	Radio expresses mutual exclusivity. Use Checkbox when options are independent.	Radio and Checkbox read as interchangeable at a glance; using the wrong one tells the reader the wrong thing about whether multiple answers are allowed.
TITAN-RADIO-02	A Radio group is exposed as a set with its own name, separate from any individual option’s label.	Without a group name, a reader navigating by label alone cannot tell that “Email” and “Phone” belong to the same “Preferred contact method” decision.
TITAN-RADIO-03	A Radio with no visible label carries an explicit accessible name.	Without one, a screen reader announces “radio button” and nothing else.
TITAN-RADIO-04	A disabled Radio is always accompanied by a reachable explanation of what would enable it.	Same reasoning as TITAN-BTN-06.
TITAN-RADIO-05	A Radio group never has exactly one option.	A single option offers no actual choice; the control communicates a decision that doesn’t exist.
TITAN-RADIO-06	A Radio group backing a required field ships with a default selection. Needs confirmation — reasonable as a default, but unverified against Titan source or the design library, which shows every state without asserting which one loads first.	An unselected mandatory group forces the reader to make a choice with no starting point to react to, which is harder than adjusting a pre-selected default.

Known issues

Radio: open issues

Divergences, open decisions, and undocumented gaps for Radio.

Why it works this way

Exclusivity is the entire point of Radio, and the group container being a real, tokened part of the system (not an assumed wrapper) is what lets that exclusivity extend to layout — a group renders as one visual unit with one edge, not a loose row of independently-positioned circles that happen to share a name attribute. A single-option group is disallowed because a choice with one answer isn’t a choice; if a option set can shrink to one at runtime, the composition needs to decide what replaces the Radio group at that point rather than rendering a Radio group that offers nothing to decide.

Status

FieldLabel — the control-label pairing every Radio uses
Checkbox — the independent-choice counterpart
Select — the collapsed alternative once the option count grows
Form validation — decides whether a selection is required

Overview

Actions

Forms

Data display

Navigation

Feedback

Containment

What it is

Live example

Exports

Vocabulary

Choose Radio when

Choose something else when

Anatomy

Variants, sizes, and states

Edge and failure states

Tokens

Composition

Content

Accessibility

Constraints

Known issues

Radio: open issues

Why it works this way

Status

​What it is

​Live example

​Exports

​Vocabulary

​Choose Radio when

​Choose something else when

​Anatomy

​Variants, sizes, and states

​Edge and failure states

​Tokens

​Composition

​Content

​Accessibility

​Constraints

​Known issues

Radio: open issues

​Why it works this way

​Status

​Related

What it is

Live example

Exports

Vocabulary

Choose Radio when

Choose something else when

Anatomy

Variants, sizes, and states

Edge and failure states

Tokens

Composition

Content

Accessibility

Constraints

Known issues

Why it works this way

Status

Related