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>