Radio Group

Exclusive choices with roving keyboard focus.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/radio-group.json

Examples

Default

Compact Comfortable Spacious

"use client";

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <label className="flex items-center gap-2.5 text-sm">
        <RadioGroupItem value="compact" /> Compact
      </label>
      <label className="flex items-center gap-2.5 text-sm">
        <RadioGroupItem value="comfortable" /> Comfortable
      </label>
      <label className="flex items-center gap-2.5 text-sm">
        <RadioGroupItem value="spacious" /> Spacious
      </label>
    </RadioGroup>
  );
}

API

<RadioGroup />

Prop	Type	Default	Description
value	string	—	Controlled selection.
defaultValue	string	—	Uncontrolled initial selection.
onValueChange	(value: string) => void	—	Selection callback.