Radio

Radio button. Use in groups (several Radios with the same name) for an exclusive selection — only one item per group can be active at a time.

When to use

✅ Use when…	🚫 Avoid when…
Choosing among a few options (up to ~5) where only one is valid — gender, plan, payment method. When the options have similar visual weight and fit on screen without scrolling.	For long lists (> ~5 options). Use `InputSelect`. For independent choices (several can be selected). Use `Checkbox`. To toggle binary settings (on/off). A toggle is clearer.

Example

Option 1

Option 2

Disabled option

<Radio id="radio-1" name="example" value="1" label="Option 1" />
<Radio id="radio-2" name="example" value="2" label="Option 2" />
<Radio id="radio-3" name="example" value="3" label="Disabled option" disabled />

Color

The checked fill follows the brand primary by default — the same interactive hue as Button and Tabs. Pass color to pick another palette (information for a neutral "filter" check, secondary, …). The validation variants (success / error) still win when set.

<Radio id="t" name="plan" value="basic" label="Basic" />
<Radio id="f" name="filter" value="fav" label="Only favorites" color="information" />

Label typography

When label is a string, the text uses the Design System defaults (fontSize="small", color="neutral.180"). To adjust size, color, or weight, pass labelProps (overrides forwarded to the internal Text/BaseText):

<Radio id="r-terms" name="plan" value="pro" label="Pro Plan" labelProps={{ fontSize: 'micro', color: 'neutral.140' }} />

For arbitrary markup (links, bold), pass a ReactNode as label — in that case labelProps is ignored and the node is rendered as-is.

Interactive Demo

Gotchas

All Radios in a group must share the same name — without it, the browser cannot enforce exclusivity between them.
Rendering several Radios manually? Reach for FieldGroup first — it already handles grid spacing, columns, and Form integration for the case.

Properties


Prop	Type	Default	Description
`color`	`"success" \| "primary" \| "secondary" \| "tertiary" \| "information" \| "warning" \| "danger"`	`'primary'`	Interaction palette of the checked state (fill / ring / ink). Defaults to the brand `primary`, like `Button` and `Tabs`. `variant` (`success` / `error`) still wins when set.
`label`	`ReactNode`	`null`	Text or element displayed next to the radio button. When `string`, it is rendered via `BaseText`; when `ReactNode`, it is rendered as-is.
`labelProps`	`Partial<TextInterface>`	—	Typography overrides for a string `label` (`fontSize`, `color`, …). Ignored when `label` is a `ReactNode`. @example ```tsx <Radio id="r" name="plan" value="x" label="Accept" labelProps={{ fontSize: 'micro', color: 'ink.secondary' }} /> ```
`onChange`	`((e: ChangeEvent<HTMLInputElement, Element>) => void)`	—	—
`value`	`string`	—	—
`variant`	`"default" \| "success" \| "error"`	`default`	Visual variant of the input — reflects the validation state.

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.