① Container
Flex row — circle + label, full click area
② Circle
16–18px ring with border and background
③ Inner dot
Filled circle shown when selected
④ Label
Optional — extends the tap target
View in Figma
Examples
Interactive previews with copy-ready code snippets. Radio buttons enforce a single selection within a group.
Default radio
Unchecked and checked states side by side.
Radio group — shipping method
Use a radio group to present mutually exclusive options. Only one option can be selected at a time. Click a row to select it.
Shipping method
Error state
Use the error state when validation requires a selection that hasn't been made. Always show an error message.
Please select one option to continue.
Disabled state
Disabled radio buttons cannot be interacted with. Explain why the option is unavailable when possible.
Sizes
Two sizes — sm (16×16px) and md (18×18px, default). Use sm inside compact UI like table rows.
Anatomy
Label text① Container② Circle③ Inner dot④ Label
States
Default
Hover
Focus
Disabled
Error
Design tokens
| Token | Value | Description |
|---|---|---|
background/brand/primary | #318272 | Inner dot fill when selected |
border/brand | #318272 | Circle border when selected |
background/surface | #ffffff | Circle background |
border/default | #d1d5db | Unselected circle border |
background/state/error/default | #ef4444 | Error state border and dot |
text/primary | #111827 | Label text |
text/secondary | #6b7280 | Helper / supplementary text |
text/disabled | #9ca3af | Disabled label |
focus/ring | #5eead4 | Focus ring |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether this radio is selected. |
state | "default" | "hover" | "focus" | "disabled" | "error" | "default" | Visual interaction state. |
label | string | — | Optional label text displayed to the right of the circle. |
size | "sm" | "md" | "md" | sm=16×16px · md=18×18px. |
onChange | () => void | — | Called when user clicks. Manage group state in the parent. |
name | string | — | HTML name attribute — all radios in a group share the same name. |
value | string | — | Value submitted with the form when this radio is selected. |
Content guidelines
Do
- Use for mutually exclusive choices — only one can be selected
- Always group radios under a descriptive label or fieldset
- List 2–7 options; more than 7 → consider a Select/Dropdown
- Pre-select the most likely or safest option
- Use clear, concise option labels in parallel phrasing
Don't
- ✕Don't use for multi-select — use Checkboxes instead
- ✕Don't leave the group with no default selection when one makes sense
- ✕Don't use standalone radio without a group context
- ✕Don't use for yes/no questions — use a Toggle instead
- ✕Don't place more than 7 options — switch to a Dropdown