Radio Group

Forms

A set of mutually exclusive options rendered as a group.

Radio groups present a list of choices where exactly one can be selected at a time. Selecting a new option clears the previous one automatically.

npx shadcn@latest add radio-group

Basic usage

Wrap a few RadioGroupItem circles in a RadioGroup, each in its own label.

Preview

Live

SolidOutlineGhost

Variant: outline

tsx

1const [value, setValue] = useState("outline")
2
3<RadioGroup
4  value={value}
5  onValueChange={setValue}
6  className="flex flex-col items-start gap-2"
7>
8  <label className="flex cursor-pointer items-center gap-2 text-sm font-medium select-none">
9    <RadioGroupItem value="solid" />
10    Solid
11  </label>
12  <label className="flex cursor-pointer items-center gap-2 text-sm font-medium select-none">
13    <RadioGroupItem value="outline" />
14    Outline
15  </label>
16</RadioGroup>

Disabled

Disable a single option or the entire group.

Preview

Live

SmallLarge

tsx

1<RadioGroup className="flex flex-col items-start gap-2">
2  <label className="flex cursor-pointer items-center gap-2 text-sm font-medium select-none">
3    <RadioGroupItem value="sm" />
4    Small
5  </label>
6  <label className="flex cursor-pointer items-center gap-2 text-sm font-medium select-none">
7    <RadioGroupItem value="lg" disabled />
8    Large
9  </label>
10</RadioGroup>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	T	The controlled selection; each RadioGroupItem also takes a value.
defaultValue	T	The uncontrolled initial value.
onValueChange	(value: T) => void	Called when the selection changes.
name	string	Identifies the group when a form is submitted.
disabled	boolean= false	Disables the whole group.