Radio Group
Group of mutually exclusive radio options, built on Radix UI.
Installation
npx paubha@latest add radio-groupUsage
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
<RadioGroup defaultValue="free" aria-label="Plan">
<RadioGroupItem value="free" label="Free" />
<RadioGroupItem value="pro" label="Pro" />
</RadioGroup>Examples
Disabled
API reference
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled selected value. |
| defaultValue | string | — | Uncontrolled initial selected value. |
| onValueChange | (value: string) => void | — | Called when the selection changes. |
| disabled | boolean | — | Disables every item in the group. |
RadioGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | This item's value within the group. |
| label | ReactNode | — | Clickable label, linked to the control via for/id. |
| disabled | boolean | — | Disables this item only. |
Accessibility
Accessibility
Role.
role="radiogroup", each itemrole="radio", provided by Radix.Keyboard. Arrow keys move roving focus between items; Space (or a click) selects the focused one. In this Radix version, arrow-key navigation moves focus without auto-selecting, verified directly rather than assumed, since some Radix components (like Tabs) do auto-select on arrow-key move and some don't.
Label. Clicking a label selects that item.