A radio button lets the user choose exactly one of two or more mutually exclusive options. Choosing one clears the others in the group.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Figma: Radio Button.
Resolved from the live token package.
| State | Part | Token | Value |
|---|
| Size | Total area | Circle | Margin | Dot | Label |
|---|---|---|---|---|---|
| Large | 24×24px | 16px | 4px | 6px | body-md: 16/22, from 769px 17/24, 0.32px |
| Small | 20×20px | 14px | 3px | 6px | body-sm: 14/20, 0.36px |
Only Large and Small exist. The hint message is body-sm (14/20, 0.36px) in both. The 1px border has no width token (--border-brd-1 is a full shorthand), so 1px is written out.
Circle and margin of each size. The shaded area is the 4px margin (3px in Small) that leaves room for the focus ring; the lines show its value.
| Attribute | Large | Small (.form-radio-item--sm) |
|---|---|---|
| Area | 24×24px | 20×20px |
| Circle | 16px, 1px border | 14px, 1px border |
| Margin around the circle | 4px | 3px |
| Dot | 6px, a radial gradient | |
| Focus ring | 2px line, 2px offset | 2px line, 2px offset |
| Gap, circle to label | 8px | 8px |
| Gap, label to message | 4px | 4px |
The same margin and gaps as spacing tokens.
| Part | Large | Small |
|---|---|---|
| Margin around the circle | space-4 | 3px: no spacing token |
| Gap circle to label | space-8 | space-8 |
| Gap label to message | space-4 | space-4 |
| Gap between options in a group | space-4 | space-4 |
There is no spacing token for 3px. The Small margin is 3px in Figma. Open point: keep 3px, or add a token.
All eight states from Figma. Hover and focus are forced on this page; in your code they come from :hover and :focus-visible. “Selected” rows are Selected, Selected hover, Selected focus and Disabled selected.
| State | Unselected | Selected |
|---|
| Part | Type | Size / line height | Letter spacing | Weight |
|---|---|---|---|---|
| Label, Large | body-md | 16/22 mobile, 17/24 from 769px | 0.32px | Regular |
| Label, Small | body-sm | 14/20 | 0.36px | Regular |
| Message | body-sm | 14/20 | 0.36px | Regular |
| Legend | label-sm (mobile), label-md (desktop) | 12/12 mobile, 16/16 from 769px | 0.48px | Bold, uppercase |
Breuer Condensed with ss02, ss03 and ss06 for the label. The disabled label and message use text-disabled.
| Element | Class | Notes |
|---|---|---|
| Group | form-radio-group | A fieldset with a legend. Vertical by default, options 4px apart. |
| Option | form-radio-item, --sm | The label around the input and the text. |
| Circle and dot | input[type="radio"] | appearance: none on the native input. The dot is a radial gradient. |
| Option with message | form-radio-field | Wraps the option and its message. |
| Message | form-radio-message | Optional hint, 4px below the label. |
| Type | How | Use |
|---|---|---|
| Vertical group | Default | Any number of options. |
| Horizontal group | flex-direction: row on the group | Two short options only. |
| With message | form-radio-field | An option that needs an explanation. |
| Small | form-radio-item--sm | Dense layouts. |
An option is as wide as its label. The click target is the whole label.
None. The radio changes state at once, with no transition and no animation.
| Input | Result |
|---|---|
| Click circle or label | Selects that option and clears the others in the group. |
| Tab | Enters the group once (the selected radio, or the first). The ring shows on keyboard focus only. |
| Arrow keys | Move and select the next or previous option in the group. Native: needs the same name. |
| Group | fieldset with a legend; every radio shares one name. |
| Disabled | Not focusable. Grey fill, light border, text-disabled label and message. |
| Default | Preselect one option in every group unless the user must choose consciously. |
| Topic | Requirement |
|---|---|
| Element | A native <input type="radio">. The role, the state and the arrow-key behavior come from the browser. |
| Group | A <fieldset> with a <legend>; every radio shares one name. |
| Name | The input and the text are wrapped in one <label>. |
| Focus | Ring with border-focus, 2px, offset 2px, on :focus-visible (WCAG 2.4.7, 1.4.11). |
| Color | Selected is not shown by color alone: the dot is a shape and the border is thicker in color. |
| Disabled | Not focusable. Disabled tokens are exempt from contrast requirements. |