Group of radio buttons for single selection.
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled value |
| defaultValue | string | — | Default selected value |
| disabled | boolean | — | Disable all options |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Border | color.primary | var(--primary) | Radio border | |
| Selected Indicator | color.primary | var(--primary) | Selected state fill | |
| Focus Ring | color.ring | var(--ring) | Focus indicator |
Basic radio group with vertical layout.
<RadioGroup
aria-label="Notification preferences"
value={value}
onValueChange={setValue}
>
<RadioGroupItem value="all" label="All notifications" />
<RadioGroupItem value="mentions" label="Mentions only" />
<RadioGroupItem value="none" label="None" />
</RadioGroup>Some options can be disabled while others remain interactive.
<RadioGroup
aria-label="Availability options"
value={value}
onValueChange={setValue}
>
<RadioGroupItem value="available" label="Available" />
<RadioGroupItem value="unavailable" label="Unavailable" disabled />
<RadioGroupItem value="coming-soon" label="Coming Soon" disabled />
</RadioGroup>Use flex-row for horizontal alignment.
<RadioGroup
aria-label="Alignment options"
value={value}
onValueChange={setValue}
className="flex flex-row gap-4"
>
<RadioGroupItem value="left" label="Left" />
<RadioGroupItem value="center" label="Center" />
<RadioGroupItem value="right" label="Right" />
</RadioGroup>