Radio Group

Option One

Option Two

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

<RadioGroup defaultValue="option-one" name="demo">
  <div class="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label for="option-one">Option One</Label>
  </div>
  <div class="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label for="option-two">Option Two</Label>
  </div>
</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">
  <div class="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label for="option-one">Option One</Label>
  </div>
  <div class="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label for="option-two">Option Two</Label>
  </div>
</RadioGroup>

Composition

Use the following composition to build a RadioGroup:

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

Examples

With Descriptions

Radio group items with a title and supporting copy using the Field component.

Starter

Basic features for personal projects.

Pro

Advanced tooling for growing teams.

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

<RadioGroup defaultValue="starter" name="plan" class="w-full max-w-sm">
  <Field orientation="horizontal">
    <RadioGroupItem id="starter" value="starter" />
    <FieldContent>
      <FieldLabel for="starter">Starter</FieldLabel>
      <FieldDescription>Basic features for personal projects.</FieldDescription>
    </FieldContent>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem id="pro" value="pro" />
    <FieldContent>
      <FieldLabel for="pro">Pro</FieldLabel>
      <FieldDescription>Advanced tooling for growing teams.</FieldDescription>
    </FieldContent>
  </Field>
</RadioGroup>

Grid Layout

Wrap the whole row in FieldLabel when you want the entire card to act as the click target.

Solo

Best for freelancers and individual builders.

Team

Collaboration, approvals, and shared workspace access.

---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} 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="w-full">
    <Field orientation="horizontal">
      <RadioGroupItem value="solo" />
      <FieldContent>
        <FieldTitle>Solo</FieldTitle>
        <FieldDescription>
          Best for freelancers and individual builders.
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
  <FieldLabel class="w-full">
    <Field orientation="horizontal">
      <RadioGroupItem value="team" />
      <FieldContent>
        <FieldTitle>Team</FieldTitle>
        <FieldDescription>
          Collaboration, approvals, and shared workspace access.
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</RadioGroup>

With FieldSet

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

Notifications

Choose how you want to be notified.

SMS

Push notification

---
import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
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">
      <Field orientation="horizontal">
        <RadioGroupItem value="email" id="notifications-email" />
        <FieldLabel for="notifications-email">Email</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="sms" id="notifications-sms" />
        <FieldLabel for="notifications-sms">SMS</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="push" id="notifications-push" />
        <FieldLabel for="notifications-push">Push notification</FieldLabel>
      </Field>
    </RadioGroup>
  </FieldSet>
</div>

Disabled

Use the disabled prop on RadioGroupItem to disable individual items.

Starter

Pro

Enterprise (Disabled)

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

<RadioGroup defaultValue="pro" name="plans">
  <div class="flex items-center gap-3">
    <RadioGroupItem value="starter" id="plan-starter" />
    <Label for="plan-starter">Starter</Label>
  </div>
  <div class="flex items-center gap-3">
    <RadioGroupItem value="pro" id="plan-pro" />
    <Label for="plan-pro">Pro</Label>
  </div>
  <div class="flex items-center gap-3">
    <RadioGroupItem value="enterprise" id="plan-enterprise" disabled />
    <Label for="plan-enterprise">Enterprise (Disabled)</Label>
  </div>
</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