Layout
Checked
Code preview
import { RadioField } from "./RadioField";
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.
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 |