Radio Group

A set of options where exactly one can be chosen, with arrow-key navigation.

Billing period

Monthly Yearly (2 months free) Lifetime

When to use

Use when: Choosing exactly one option from a short list where all options should be visible.
Avoid when: There are many options; use Select or Combobox.

Installation

bunx shelf add radio-group

The source lands in src/components/ui/radio-group.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

<RadioGroup aria-labelledby="plan-label" defaultValue="monthly">
  <Label><RadioGroupItem value="monthly" /> Monthly</Label>
  <Label><RadioGroupItem value="yearly" /> Yearly</Label>
</RadioGroup>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.