Radio

One selection per group. Indicator states follow the Figma radio base matrix (uncheck / check / hover × default / disabled). When error is set, the control reads as unselected even if checked is true.

Group

RadioGroup

Controlled group with a shared name. Only one option appears selected.

Plan (interactive)

FreeUp to 3 rules

ProUnlimited rules

EnterpriseSSO + audit

States

Selected, unselected, disabled, error

Standalone

Option A

Option B

Disabled

Selected (disabled)

Unselected (disabled)

Error

Pick a workspace

Choose one workspace to continue.

Error + description

Billing regionRequired for tax.

Select your region.

Sizes

Small, default, large

Alpha

Beta

Alpha

Beta

Alpha

Beta

Structure

Anatomy

Indicator

16px default frame: 1px border #94A3B8 unselected; selected uses 4px ring #0D65FC with white interior only. Disabled uses #CBD5E1 (Figma 198:1026).

Hover / focus

Unselected: border #0D65FC with 3px #BFD6FE outer halo. Selected hover matches default selected.

Error

Red 1px border until resolved; optional errorMessage below.

Native input

type="radio" for grouping and screen readers.

Usage

Do & Don't

Use RadioGroup for mutually exclusive options.
Keep labels parallel and scannable.

Don't

Don't use radios for on/off that applies alone — use Switch.
Don't nest radios inside checkboxes.