Radio Group

A group of radio buttons where only one can be selected.

Installation

bash
npx shadcn@latest add radio-group

Import

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

Default

<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>

Controlled

const [value, setValue] = React.useState("default")<RadioGroup value={value} onValueChange={setValue}>  ...</RadioGroup>

Props

RadioGroup

PROPTYPEDEFAULTDESCRIPTION
valuestring—Controlled selected value
defaultValuestring—Initial value (uncontrolled)
onValueChange(value: string) => void—Called when selection changes
disabledbooleanfalseDisables all items
orientation"horizontal" | "vertical""vertical"Layout orientation

RadioGroupItem

PROPTYPEDEFAULTDESCRIPTION
valuestring—Item value (required)
disabledbooleanfalseDisables this item
idstring—For label pairing