- Home
- Components
- Radio Group

# RadioGroup

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

## Props


Component	Notes
RadioGroup	Pass-through wrapper over Radix RadioGroup.Root with layout classes
RadioGroupItem	Pass-through wrapper over Radix RadioGroup.Item with styles

All Radix props are supported.

### Example

```
<RadioGroup defaultValue="a">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="a" id="a" />
    <label htmlFor="a">Option A</label>
  </div>
</RadioGroup>
```

## Usage

```
<RadioGroup defaultValue="r2">
    <div className="flex items-center gap-3">
      <RadioGroupItem value="r1" id="r1" />
      <label htmlFor="r1">Radio 1</label>
    </div>
    <div className="flex items-center gap-3">
      <RadioGroupItem value="r2" id="r2" />
      <label htmlFor="r2">Radio 2</label>
    </div>
    <div className="flex items-center gap-3">
      <RadioGroupItem value="r3" id="r3" disabled />
      <label htmlFor="r3">Radio 3 disabled</label>
    </div>
  </RadioGroup>
  <RadioGroup defaultValue="r3">
    <div className="flex items-center gap-3">
      <RadioGroupItem value="r1" id="r1" />
      <label htmlFor="r1">Radio 1</label>
    </div>
    <div className="flex items-center gap-3">
      <RadioGroupItem value="r2" id="r2" />
      <label htmlFor="r2">Radio 2</label>
    </div>
    <div className="flex items-center gap-3">
      <RadioGroupItem value="r3" id="r3" disabled />
      <label htmlFor="r3">Radio 3 disabled</label>
    </div>
  </RadioGroup>
```