Radio Groups

Usage and anatomy

RadioGroup provides an accessible single-choice field. Use <RadioGroup.Root /> for the group, <RadioGroup.Item /> for each option, and pair every item with a <Label />.

import * as RadioGroup from "@acme/ui/radio-group"
import { Label } from "@acme/ui/label"

<RadioGroup.Root defaultValue="pro" aria-label="Choose a plan">
  <div className="flex plumeui-wr plumeui-naa">
    <RadioGroup.Item value="pro" id="pro" />
    <Label htmlFor="pro">Pro</Label>
  </div>
</RadioGroup.Root>

• Use radio groups when exactly one option should be selected from a set.
• Give the group an accessible name with a visible legend or aria-label.
• Use descriptions or choice cards when each option needs additional context.

API reference

RadioGroup.Root

RadioGroup.Root also accepts native Radix radio-group props such as value, onValueChange, name, and aria-label. RadioGroup.Item accepts a required value and a unique id.