Radio Group

A set of checkable buttons where no more than one can be checked at a time.

Default

Comfortable

Compact

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/radio-group.json

Usage

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

<RadioGroup className="max-w-md" defaultValue="comfortable">
  <div className="flex items-center gap-2">
    <RadioGroupItem id="r1" value="default" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem id="r2" value="comfortable" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem id="r3" value="compact" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>

Disabled

Disable an individual item to prevent it from being selected.

Available

Disabled