Components
Radio
Picks exactly one option from a short list.
Playground
Figma variant
🕹 State=Default
👕 Size=Medium
Checked=True
with Text=True
Error=False
Disabled=FalseVariants
Sizes
States
Hover darkens the border to primary, keyboard focus adds the focus ring, error turns the border red, disabled flattens the control.
In a form
ChoiceGroup is the Form Checkbox / Radio / Switch pattern: a label, the options 16px apart, and a hint or error.
Tokens
| State | Fill | Border | Mark |
|---|---|---|---|
| Off | --color-surface-level-1 | --color-foreground-medium-emphasis | |
| Hover | --color-surface-level-1 | --color-primary | |
| On | --color-primary | — | --color-on-primary + --shadow-depth-md |
| Error | --color-surface-level-1 | --color-error | |
| Disabled | --color-surface-level-3 | --color-surface-level-4 | --color-foreground-low-emphasis |
Notes from Figma
- Figma has no focus state for Radio; code uses the Checkbox focus ring so keyboard users can see focus.
- In the error variant Figma uses Label Type=Hint (a neutral hint); code shows an error Hint, like Checkbox.
Figma to code
| Figma | React |
|---|---|
| 👕 Size = Medium / Small | size='medium' / 'small' |
| Checked = True | checked |
| with Text = True | label="…" |
| Error / Disabled | error / disabled |
| Fluid = True | fluid |
| Form Spacing = True | spacing |
| Form Radio Button | <ChoiceGroup label hint> |