Radio

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Features

Full keyboard navigation.
Supports horizontal/vertical orientation.
Can be controlled or uncontrolled.

Install

Import

API

Root

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
defaultValue	`string`	undefined
dir	`Direction`	ltr
disabled	`boolean`	false
loop	`boolean`	true
modelValue	`string`	-
name	`string`	-
orientation	`DataOrientation`	undefined
required	`boolean`	false

Event	Type
update:modelValue	`[_value: string]`

Data attribute	Value
[data-disabled]	Present when disabled

Item

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
disabled	`boolean`	false
id	`string`	-
name	`string`	-
required	`boolean`	false
value	`string`	on

Data attribute	Value
[data-state]	'checked' \| 'unchecked'
[data-disabled]	Present when disabled

Indicator

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false
forceMount	`boolean`	false

Data attribute	Value
[data-state]	'checked' \| 'unchecked'
[data-disabled]	Present when disabled