Radio Group

RadioGroup lets a user pick exactly one option from a small set of mutually exclusive choices. It is built on Radix RadioGroup, so arrow-key navigation and selection state are handled for you. Compose the group from RadioGroupItem controls, each paired with a Label.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: radio-group.tsx

import { RadioGroup, RadioGroupItem, Label } from "@beacon/design-system";

<RadioGroup defaultValue="comfortable">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>

Parts

Part	Role
RadioGroup	The container that owns the selected value. Forwards Radix RadioGroup.Root props such as value, defaultValue, onValueChange, and disabled.
RadioGroupItem	A single radio button. Requires a unique value; pair with a Label via matching id / htmlFor.

When to use

• Choosing exactly one option from a short, mutually exclusive set (2 to roughly 6 choices).
• Settings where seeing all options at once matters (for example density: default, comfortable, compact).

Do not use RadioGroup when multiple options can be selected at once; use a Checkbox per option instead. For a long list of exclusive options, prefer a Select dropdown.