Radio Group
Single choice among options, with arrow-key navigation.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/radio-group.jsonUsage
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
<RadioGroup value={density} onValueChange={setDensity}>
<div className="flex items-center gap-2">
<RadioGroupItem value="compact" id="compact" />
<Label htmlFor="compact">Compact</Label>
</div>
</RadioGroup>Horizontal layout: add className="flex-row gap-4" to the group.
Props
| Prop | Type | Default |
|---|---|---|
value / defaultValue | string | — |
onValueChange | (value, details) => void | — |
disabled | boolean (group or item) | false |
Accessibility
- Base UI RadioGroup: one Tab stop for the whole group, Arrow keys move the selection, matching native radio behavior.
- Each item needs a label; use
htmlFor/idpairs.