Radio Group
A set of mutually exclusive options, such as a deployment region or rollout strategy.
Install
pnpm dlx shadcn@latest add @namche/radio-groupUsage
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
<RadioGroup defaultValue="eu-west-1" className="gap-3">
<div className="flex items-center gap-2.5">
<RadioGroupItem value="eu-west-1" id="eu-west-1" />
<Label htmlFor="eu-west-1">EU West — Dornbirn</Label>
</div>
<div className="flex items-center gap-2.5">
<RadioGroupItem value="us-east-1" id="us-east-1" />
<Label htmlFor="us-east-1">US East — Ashburn</Label>
</div>
</RadioGroup>Built on Base UI's RadioGroup/Radio. RadioGroup takes value /
defaultValue (uncontrolled) and onValueChange; each RadioGroupItem sets
its own value. Every item needs an id paired to a Label's htmlFor —
the group itself renders a plain <div>, so there's no built-in labelling.