Radio
Single-selection input. Use RadioGroup as the container and add RadioItem for each option.
Anatomy
<RadioGroup defaultValue="member" onValueChange={setValue}>
<RadioItem value="admin" label="Admin" description="Optional description" />
<RadioItem value="member" label="Member" />
</RadioGroup>Examples
With descriptions
Horizontal
Disabled
RadioGroup props
defaultValue
string
Initially selected value (uncontrolled).
value
string
Controlled selected value.
onValueChange
(value: string) => void
Called when selection changes.
orientation= 'vertical'
'vertical' | 'horizontal'
Layout direction.
disabled
boolean
Disables all items in the group.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | Initially selected value (uncontrolled). |
| value | string | — | Controlled selected value. |
| onValueChange | (value: string) => void | — | Called when selection changes. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction. |
| disabled | boolean | — | Disables all items in the group. |
RadioItem props
value*
string
The value this item represents.
label
string
Short label rendered next to the radio.
description
string
Secondary line of text below the label.
disabled
boolean
Disables this individual item.
id
string
Custom id for the input element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string | — | The value this item represents. |
| label | string | — | Short label rendered next to the radio. |
| description | string | — | Secondary line of text below the label. |
| disabled | boolean | — | Disables this individual item. |
| id | string | — | Custom id for the input element. |