Radio Group
A set of checkable buttons where only one can be checked at a time.
Installation
npx shadcn@latest add @uqudo/radio-groupUsage
import { RadioGroup, RadioGroupItem } from "@/components/uqudo/ui/radio-group"<RadioGroup defaultValue="comfortable">
<div className="flex items-center gap-3">
<RadioGroupItem value="default" id="r1" />
<Label htmlFor="r1">Default</Label>
</div>
<div className="flex items-center gap-3">
<RadioGroupItem value="comfortable" id="r2" />
<Label htmlFor="r2">Comfortable</Label>
</div>
</RadioGroup>Give each RadioGroupItem an id and pair it with a
Label. The group is a vertical grid by default; add
className="flex" or grid-cols-* utilities to change the layout.
Examples
Disabled
Disable a single item, or the whole group at once.
API Reference
RadioGroup
Prop
Type
RadioGroupItem
Prop
Type
Data attributes
| Attribute | Value |
|---|---|
data-slot | radio-group, radio-group-item or radio-group-indicator. |
data-state | On an item: checked or unchecked (from Radix). |