Radio Group
Exclusive choices with roving keyboard focus.
Install
$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/radio-group.jsonExamples
Default
"use client";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
export function RadioGroupDemo() {
return (
<RadioGroup defaultValue="comfortable">
<label className="flex items-center gap-2.5 text-sm">
<RadioGroupItem value="compact" /> Compact
</label>
<label className="flex items-center gap-2.5 text-sm">
<RadioGroupItem value="comfortable" /> Comfortable
</label>
<label className="flex items-center gap-2.5 text-sm">
<RadioGroupItem value="spacious" /> Spacious
</label>
</RadioGroup>
);
}API
<RadioGroup />
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled selection. |
| defaultValue | string | — | Uncontrolled initial selection. |
| onValueChange | (value: string) => void | — | Selection callback. |