A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" export function RadioGroupDemo() { return ( <RadioGroup defaultValue="comfortable"> <div className="flex items-center space-x-2"> <RadioGroupItem value="default" id="r1" /> <Label htmlFor="r1">Default</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="comfortable" id="r2" /> <Label htmlFor="r2">Comfortable</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="compact" id="r3" /> <Label htmlFor="r3">Compact</Label> </div> </RadioGroup> ) }
Part of shadcn/ui — browse the full library on 21st.dev.