Docs › Components › Radio Group

Shadcn Radio Group

The shadcn/ui Radio Group lets users pick exactly one option from a visible set, styled with Tailwind CSS v4. Built on accessible primitives, it supports arrow-key navigation and a single tab stop. Radio groups drive shipping, payment, and plan choices across ShadcnStore blocks.

Key features

• One choice from a set with arrow-key navigation.
• Controlled or uncontrolled via value / defaultValue.
• Each item pairs with a Label.
• Single tab stop for the whole group.

Installation

npx shadcn@latest add radio-group

Usage

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

export function Example() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
    </RadioGroup>
  )
}

Controlled value

const [value, setValue] = useState("default")

<RadioGroup value={value} onValueChange={setValue}>…</RadioGroup>

Card options

Wrap each option in a Label with a border to build selectable cards, a common pattern for plan and payment pickers. The has-[[data-state=checked]] variant highlights the selected card.

<Label className="flex items-center gap-3 rounded-lg border p-3 has-[[data-state=checked]]:border-primary">
  <RadioGroupItem value="pro" id="pro" />
  <div className="flex-1">
    <div className="text-sm font-medium">Pro</div>
    <div className="text-muted-foreground text-xs">For growing teams</div>
  </div>
  <div className="text-sm font-medium">$29/mo</div>
</Label>

Props

Prop	Type	Default	Description
value	string	—	Controlled selected value.
defaultValue	string	—	Uncontrolled initial value.
onValueChange	(value) => void	—	Fires when the choice changes.
disabled	boolean	false	Disable the whole group.

Accessibility

• Associate a Label with each item, and give the group a name with a heading or aria-label.
• Arrow keys move between options; only the selected item is in the tab order.
• Keep the option set short and visible; for many options use a Select.

When to use the Radio Group

Use a Radio Group when the user must choose exactly one option from a few visible choices: a shipping speed, a payment method, or a plan. For many options, use a Select. For multiple independent choices, use Checkboxes.

Used in these blocks

• Checkout forms: shipping and payment options.
• Category filters: single-choice filters.
• Pricing sections: billing-period choice.

Related components

Each option pairs with a Label and lives inside a Form. For many options use a Select; for multiple choices use a Checkbox.

FAQ

What is the shadcn radio group used for?

The Radio Group lets users pick exactly one option from a small, visible set, such as a shipping method or plan.

What is the difference between Radio Group and Select?

Radio Group shows all options at once and suits a few choices. Select hides options behind a trigger and suits longer lists.

How do I control the selected value?

Pass value and onValueChange to RadioGroup, or use defaultValue for an uncontrolled starting choice.

How do I make radio options horizontal?

Add a flex row class to the RadioGroup so the items lay out side by side instead of stacked.