AG Design System

Component

Radio Group

Single-select control for mutually exclusive options. Shows all choices simultaneously for easy comparison.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/radio-group

Usage

Use radio groups when users must choose exactly one option from a short list (2–6 items). For longer lists, use a Select.

Playground

Preview

Configure

No

Code

<RadioGroup defaultValue="option1">
  <RadioGroupItem value="option1" label="Option one" />
  <RadioGroupItem value="option2" label="Option two" />
  <RadioGroupItem value="option3" label="Option three" />
</RadioGroup>

Variants & States

Supported variants, sizes, and interaction states for this component.

States

  • Default
  • Disabled

Do

  • Use when there are 2–6 mutually exclusive options
  • Always pre-select the most common or safest option
  • Stack options vertically for easy scanning

Don't

  • Don't use for more than 6 options, use a Select instead
  • Don't use radio buttons for multi-select, use checkboxes