RadioGroup

A set of mutually-exclusive options where exactly one is chosen. Reach for RadioGroup when all 2–5 options should stay visible at once; use Select when the list is long or space is tight, Checkbox when more than one value can be selected, and Switch for a single on/off setting. Flat fill, full-round dot, and a focus ring matched to Checkbox and Input. Default tone is neutral; tone="destructive" tints the control red to flag an irreversible choice. Sizes: md (16px, default) for standard form rows, lg (20px) for hero or low-density presence.

Basic

<RadioGroup defaultValue="recents">
  {["Recents", "Home", "Applications", "Desktop"].map((item) => {
    const id = item.toLowerCase();
    return (
      <label key={id} className="flex items-center gap-2">
        <RadioGroupItem value={id} id={id} />
        <Label htmlFor={id} weight="normal">{item}</Label>
      </label>
    );
  })}
</RadioGroup>

Destructive tone

<RadioGroup defaultValue="delete">
  <label className="flex items-center gap-2">
    <RadioGroupItem value="archive" tone="destructive" id="archive" />
    <Label htmlFor="archive" weight="normal">Archive for 30 days</Label>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="delete" tone="destructive" id="delete" />
    <Label htmlFor="delete" weight="normal">Delete immediately</Label>
  </label>
</RadioGroup>

Disabled

<RadioGroup defaultValue="one" disabled>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="one" id="one" />
    <Label htmlFor="one" weight="normal">Option one</Label>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="two" id="two" />
    <Label htmlFor="two" weight="normal">Option two</Label>
  </label>
</RadioGroup>

Sizes

<>
  <RadioGroupItem size="md" defaultChecked value="m" />
  <RadioGroupItem size="lg" defaultChecked value="l" />
</>

Source

packages/react/src/components/radio-group.tsx · Figma node 2819:29276