Radio Group

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

<RadioGroup defaultValue="option-one" name="demo">
  <Label class="gap-3">
    <RadioGroupItem value="option-one" />
    Option One
  </Label>
  <Label class="gap-3">
    <RadioGroupItem value="option-two" />
    Option Two
  </Label>
</RadioGroup>

Installation

npx shadcn@latest add @fulldev/radio-group

Usage

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

<RadioGroup defaultValue="option-one" name="example">
  <Label class="gap-3">
    <RadioGroupItem value="option-one" />
    Option One
  </Label>
  <Label class="gap-3">
    <RadioGroupItem value="option-two" />
    Option Two
  </Label>
</RadioGroup>

Label each item by wrapping it in Label. RadioGroupItem renders a span, which Label for cannot point to.

Composition

Use the following composition to build a RadioGroup:

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

Examples

With Descriptions

Radio group items with a title and supporting copy. Wrap the item and its text in Label. A label may only contain phrasing content, so use span elements for the text.

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

<RadioGroup defaultValue="starter" name="plan" class="w-full max-w-sm">
  <Label class="items-start gap-3">
    <RadioGroupItem value="starter" />
    <span class="flex flex-col gap-1 leading-snug">
      Starter
      <span class="text-muted-foreground font-normal">
        Basic features for personal projects.
      </span>
    </span>
  </Label>
  <Label class="items-start gap-3">
    <RadioGroupItem value="pro" />
    <span class="flex flex-col gap-1 leading-snug">
      Pro
      <span class="text-muted-foreground font-normal">
        Advanced tooling for growing teams.
      </span>
    </span>
  </Label>
</RadioGroup>

Grid Layout

Wrap the whole row in FieldLabel when you want the entire card to act as the click target. FieldLabel highlights the card when its item is checked.

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

<RadioGroup defaultValue="team" name="audience" class="w-full max-w-md">
  <FieldLabel
    class="has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring/50 hover:bg-muted/50 w-full items-start gap-3 rounded-md border p-3 has-[:focus-visible]:ring-3"
  >
    <RadioGroupItem value="solo" />
    <span class="flex flex-col gap-1">
      Solo
      <span class="text-muted-foreground font-normal">
        Best for freelancers and individual builders.
      </span>
    </span>
  </FieldLabel>
  <FieldLabel
    class="has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring/50 hover:bg-muted/50 w-full items-start gap-3 rounded-md border p-3 has-[:focus-visible]:ring-3"
  >
    <RadioGroupItem value="team" />
    <span class="flex flex-col gap-1">
      Team
      <span class="text-muted-foreground font-normal">
        Collaboration, approvals, and shared workspace access.
      </span>
    </span>
  </FieldLabel>
</RadioGroup>

With FieldSet

Use FieldSet and FieldLegend to group radio items with a shared label and description.

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

<div class="w-full max-w-sm">
  <FieldSet>
    <FieldLegend>Notifications</FieldLegend>
    <FieldDescription>Choose how you want to be notified.</FieldDescription>
    <RadioGroup defaultValue="email" name="notifications">
      <Label class="gap-3">
        <RadioGroupItem value="email" />
        Email
      </Label>
      <Label class="gap-3">
        <RadioGroupItem value="sms" />
        SMS
      </Label>
      <Label class="gap-3">
        <RadioGroupItem value="push" />
        Push notification
      </Label>
    </RadioGroup>
  </FieldSet>
</div>

Disabled

Use the disabled prop on RadioGroupItem to disable individual items.

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

<RadioGroup defaultValue="pro" name="plans">
  <Label class="gap-3">
    <RadioGroupItem value="starter" />
    Starter
  </Label>
  <Label class="gap-3">
    <RadioGroupItem value="pro" />
    Pro
  </Label>
  <Label class="gap-3">
    <RadioGroupItem value="enterprise" disabled />
    Enterprise (Disabled)
  </Label>
</RadioGroup>

API Reference

See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search