Radio Group

PreviousNext

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Docs API Reference
Comfort Level
import { Radio, RadioGroup } from "@/components/ui/radio-group"

export function RadioGroupDemo() {
  return (
    <div className="mx-auto w-max">
      <RadioGroup defaultValue="comfortable" label="Comfort Level">
        <Radio value="default" id="r1">
          Default
        </Radio>
        <Radio value="comfortable" id="r2">
          Comfortable
        </Radio>
        <Radio value="compact" id="r3">
          Compact
        </Radio>
      </RadioGroup>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add radio-group