Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Radio Group
description: A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
---

```astro live props={{ name: 'radio-group' }}
---
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

```bash
npx shadcn@latest add @fulldev/radio-group
```

## Usage

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

```astro
<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`:

```text
RadioGroup
├── RadioGroupItem
└── RadioGroupItem
```

## Examples

### With Descriptions

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

```astro live
---
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.

```astro live
---
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.

```astro live
---
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.

```astro live
---
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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/radio-group) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/radio-group/README.md) for more information on interactivity.