Docs draft
Radio
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useOne choice among 2-5 visible options (audio language, video quality).
avoidMore than ~5 options, or options that need descriptions.
select Planned.avoidIndependent choices — radios are never solitary.
checkboxStates
unchecked — Not selected; only the control boundary shows.
checked — Selected; the fill and glyph show the on state.
disabled — Not interactive; rendered with the lifted disabled tokens so it stays perceivable.
checked disabled — Selected and not interactive; the selection stays perceivable.
Design specifications
| ring | 20px, radius.full, 2px stroke, inside a 44px touch target |
| dot | 12px, color.accent.base |
| border-rest | color.border.strong (3:1 contracted) |
| border-checked | color.accent.base |
| border-disabled | color.border.subtle |
| dot-checked-disabled | color.text.disabled |
| label | type.body via the children slot |
Accessibility
Arrow keys — Move selection within the group (native behavior; share the name attribute).
Tab — One stop per group; focus ring 2px text.primary offset 3.
color.border.strong on color.bg.primary — Contracted at ≥ 3:1 by the build gate.
Native input; grouping comes from the shared name attribute, never from ARIA improvisation.