---
title: Radio buttons (React) - USWDS + Tailwind
description: Use radio buttons when people must choose exactly one option from a
  group. Compare standard and tiled styles.
---

# Radio buttons

Use radio buttons when people must choose exactly one option from a group. Compare standard and tiled styles.

## Examples

### Default

```tsx
import { Fieldset, RadioGroup } from '@uswds-tailwind/react'

export default function RadioButtonsDemo() {
  return (
    <Fieldset.Root className="max-w-xs">
      <Fieldset.Legend>Select one historical figure</Fieldset.Legend>
      <RadioGroup.Root>
        <RadioGroup.Item value="sojourner-truth">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Sojourner Truth</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="frederick-douglass">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Frederick Douglass</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="booker-t-washington">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Booker T. Washington</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="george-washington-carver">
          <RadioGroup.ItemInput disabled />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>George Washington Carver</RadioGroup.ItemLabel>
        </RadioGroup.Item>
      </RadioGroup.Root>
    </Fieldset.Root>
  )
}
```

### Tiled

```tsx
import { Fieldset, RadioGroup } from '@uswds-tailwind/react'

export default function RadioButtonsTiledDemo() {
  return (
    <Fieldset.Root className="max-w-xs">
      <Fieldset.Legend>Select one historical figure</Fieldset.Legend>
      <RadioGroup.Root tile>
        <RadioGroup.Item value="sojourner-truth">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>
            Sojourner Truth
            <RadioGroup.ItemDescription>
              This is optional text that can describe the choice in more detail.
            </RadioGroup.ItemDescription>
          </RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="frederick-douglass">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Frederick Douglass</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="booker-t-washington">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Booker T. Washington</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="george-washington-carver">
          <RadioGroup.ItemInput disabled />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>George Washington Carver</RadioGroup.ItemLabel>
        </RadioGroup.Item>
      </RadioGroup.Root>
    </Fieldset.Root>
  )
}
```

## Component API

Put Item parts inside Root, with ItemInput, ItemControl, ItemLabel, and optional ItemDescription inside each item.

### Root `<div>`

Owns the selected radio value.

| Prop | Type | Description |
| - | - | - |
| `name` | `string` | Form field name. |
| `disabled` | `boolean` | Disables the group. |
| `readOnly` | `boolean` | Sets aria-readonly on the group. Native radio inputs remain operable. |
| `invalid` | `boolean` | Marks the group invalid. |
| `onValueChange` | `(value: string) => void` | Receives the selected value. |
| `tile` | `boolean` | Uses the tiled item treatment. |

### Item `<label>`

Connects ItemInput, ItemControl, and ItemLabel for one choice.

| Prop | Type | Description |
| - | - | - |
| `value` | `string (required)` | Value for this choice. |

### ItemInput `<input>`

Native radio control. Pass disabled for an individual choice and defaultChecked for an initial selection.

### ItemControl `<div>`

Displays the custom selection mark.

### ItemLabel `<div>`

Displays the option text.

### ItemDescription `<div>`

Displays optional help text.