RadioGroup

A group of radio buttons for selecting a single value from a list of options. Supports vertical and horizontal layouts.

Basic

Horizontal

Colors

Controlled

Disabled

RadioGroup Props

Prop	Type	Default	Description
`value`	`string`	—	The selected value (controlled).
`defaultValue`	`string`	—	The initial selected value (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called when the selected value changes.
`label`	`string`	—	Label displayed above the group.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Layout direction of the radio items.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the radio indicators.
`disabled`	`boolean`	`false`	Disables all radio items in the group.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

string

The selected value (controlled).

defaultValue

string

The initial selected value (uncontrolled).

onValueChange

(value: string) => void

Called when the selected value changes.

label

string

Label displayed above the group.

orientation"vertical"

"vertical" | "horizontal"

Layout direction of the radio items.

color"blue"

Accent color for the radio indicators.

disabledfalse

boolean

Disables all radio items in the group.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

RadioGroup.Item Props

Prop	Type	Default	Description
`value`	`string`	—	The value of this radio item.
`label`	`string`	—	Label displayed next to the radio indicator.
`disabled`	`boolean`	`false`	Disables this individual radio item.

value

string

The value of this radio item.

label

string

Label displayed next to the radio indicator.

disabledfalse

boolean

Disables this individual radio item.