Radio
FreeSingle-selection form control for mutually exclusive options. Always used in groups of 2 or more. When one radio is selected, the previously selected one in the group is automatically deselected. Uses a filled dot indicator for the selected state.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Unselected | Default unselected state with an empty circle. | Starting state for non-default options. |
| Selected | Selected state with a filled brand-colour dot inside the circle. | When the option has been selected by the user. |
| Disabled | Non-interactive state with reduced opacity. | When an option is unavailable but should still be visible. |
Usage Guidelines
Do
Always use in groups of 2 or more options.
Don't
Use a single radio button alone — use Checkbox or Toggle instead.
Do
Pre-select a sensible default when possible.
Don't
Use radios for multi-select — use Checkbox instead.
Do
Group with <fieldset> and <legend> for accessible context.
Don't
Place Radio groups without a visible group label.
Code
HTML
<fieldset>
<legend class="lex-label">Plan</legend>
<label class="lex-radio-row">
<input type="radio" name="plan" class="lex-radio" value="free" checked />
<span class="lex-radio-row__label">Free</span>
</label>
<label class="lex-radio-row">
<input type="radio" name="plan" class="lex-radio" value="pro" />
<span class="lex-radio-row__label">Pro</span>
</label>
</fieldset>CSS Custom Properties
.lex-radio {
width: var(--lex-radio-size, 18px);
height: var(--lex-radio-size, 18px);
border-radius: 50%;
border: 1.5px solid var(--lex-radio-border);
background: transparent;
appearance: none;
cursor: pointer;
transition: border-color 150ms ease;
}
.lex-radio:checked {
border-color: var(--lex-radio-bg-selected);
background: radial-gradient(circle,
var(--lex-radio-dot-color) 40%,
transparent 41%);
}React
// Using Lexicon CSS classes with React
export function PlanSelector() {
return (
<RadioGroup label="Plan" defaultValue="free">
<Radio value="free">Free</Radio>
<Radio value="pro">Pro</Radio>
</RadioGroup>
);
}Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-radio-size | — | — | size |
| --lex-radio-border | — | — | border |
| --lex-radio-bg-selected | — | — | selected |
| --lex-radio-dot-size | — | — | size |
| --lex-radio-dot-color | — | — | color |
Accessibility
- Use native <input type="radio"> within a <fieldset> with <legend>.
- Arrow keys navigate within the group — only one radio receives tab focus.
- Use aria-required on the fieldset if selection is mandatory.