ComponentsRadio buttons

Radio buttons

Single-choice controls for one option at a time, shown alone, in a vertical list, or in a compact horizontal row.

Pick exactly one option—alone, in a vertical list with optional dividers, or in a compact horizontal row.

Layout

Checked

Disabled

Select

Code preview

import { RadioField } from "./RadioField";

Color tokens for radio states and labels.

Token	Value	Color	Usage
Unchecked ring	`var(--input-input-stroke-default)`	`#8f9da4`	Outline when not selected
Checked ring	`var(--lavender-500)`	`#765cd8`	Outline when selected
Inner dot	`var(--lavender-500)`	`#765cd8`	Center mark when selected
Label	`var(--text-heading-strong)`	`#063235`	Text beside the control