Radio Group

tsx

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";const OPTIONS = [{ value: "default", label: "Default" },{ value: "comfortable", label: "Comfortable" },{ value: "compact", label: "Compact" },];export function RadioGroupDemo() {return (  <RadioGroup defaultValue="comfortable">    {OPTIONS.map((option) => (      <div key={option.value} className="flex items-center gap-3">        <RadioGroupItem value={option.value} id={`r-${option.value}`} />        <label htmlFor={`r-${option.value}`} className="text-sm">          {option.label}        </label>      </div>    ))}  </RadioGroup>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/radio-group.json"

Usage

tsx

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

tsx

<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

API

RadioGroup

Built on Radix Radio Group Root; accepts all its props.

Prop	Type	Default	Description
`value`	`string \| null`	none	Controlled selected value.
`defaultValue`	`string`	none	Selected value on first render, when uncontrolled.
`onValueChange`	`(value: string) => void`	none	Called when the selection changes.
`disabled`	`boolean`	`false`	Disables every item.
`required`	`boolean`	`false`	A value must be selected before the form submits.
`name`	`string`	none	Name of the value submitted with a form.
`orientation`	`"horizontal" \| "vertical"`	none	Limits arrow-key navigation to one axis. Without it, all arrow keys move.
`loop`	`boolean`	`true`	Keyboard focus wraps from the last item to the first.

RadioGroupItem

Built on Radix Radio Group Item; accepts all its props. Renders the ring and its indicator dot.

Prop	Type	Default	Description
`value`	`string`	none	Required. The value this item selects.
`disabled`	`boolean`	`false`	Disables this item.

Props match shadcn/ui Radio Group.