gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/radio-group.md

• 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>