import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
export function RadioGroupDemo() {
return (
<RadioGroup defaultValue="bus">
<div className="flex items-center space-x-2">
<RadioGroupItem value="bus" id="bus" />
<Label htmlFor="bus">Bus</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="van" id="van" />
<Label htmlFor="van">Van</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="car" id="car" />
<Label htmlFor="car">Car</Label>
</div>
</RadioGroup>
);
}Installation
npx shadcn@latest add @eo-n/radio-groupUsage
Import all parts and piece them together.
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";<RadioGroup>
<div className="flex items-center space-x-2">
<RadioGroupItem value="right" id="right" />
<Label htmlFor="right">Right</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="left" id="left" />
<Label htmlFor="left">Left</Label>
</div>
</RadioGroup>Examples
Disabled Item
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
export function RadioGroupDisabled() {
return (
<RadioGroup>
<div className="flex items-center space-x-2">
<RadioGroupItem value="apple" id="apple" disabled />
<Label htmlFor="apple">Apple</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="orange" id="orange" />
<Label htmlFor="orange">Orange</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="mango" id="mango" />
<Label htmlFor="mango">Mango</Label>
</div>
</RadioGroup>
);
}