Radio
A set of round options where exactly one is chosen. Choosing one clears the one before, so the group always answers a single question.
Preview
When to use
- For two to six mutually exclusive options that are worth seeing side by side: a plan, a delivery speed.
- When the options need a description each, so people can compare before they pick.
Reach for something else
- For a long list of options, or where space is tight: that is a Dropdown.
- For several options that can all be true: those are Checkboxes.
Anatomy
- 1
Group
The question, as a legend above the options.
- 2
Circle
An empty ring at rest; a filled dot inside when selected.
- 3
Label
The option's name, clickable along with the circle.
- 4
Description
Optional line under the label that explains the option.
States
Unselected
Empty ring.
Selected
Brand ring with a dot inside.
Hover
The ring darkens a step.
Focus
A ring around the focused option.
Disabled
One option or the whole group is muted and inert.
Accessibility
- Native <input type="radio"> elements sharing one name, inside a <fieldset> with a <legend>.
- The group is one tab stop; the arrow keys move the selection between options.
- Each option's description is linked with aria-describedby so it is read with the label.
Source
The Radio is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block