Design System/Atoms/Radio Group

Radio Group

Single selection from a set of mutually exclusive options. Multiple layout and visual variants.

When To Use

  • Use Radio Group when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Keep a visible label or an equivalent accessible name attached to the control.
  • Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
  • Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Key exports

RadioGroupRoot, RadioGroupItem

Example Code

<RadioGroup defaultValue="mp3">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="mp3" id="fmt-mp3" />
    <Label htmlFor="fmt-mp3">MP3 — 128 kbps</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="wav" id="fmt-wav" />
    <Label htmlFor="fmt-wav">WAV — lossless</Label>
  </div>
</RadioGroup>

Radio Group · Basic

Stacked list

Vertical list of radio options

Radio Group · Inline

Horizontal list

Options side by side

Radio Group · With description

Description below label

Each option includes supporting text

For personal projects and experiments.

For client work and solo professionals.

For early-stage companies with growing teams.

Custom contracts and dedicated support.

Radio Group · Radio on right

Label left, radio right

Common for payment method selection

SEPA, SWIFT, and local bank transfers.

Send money using your PayPal balance.

Visa, Mastercard, Amex, and more.

Radio Group · Color picker

Color swatch selection

Visual circles with ring indicator on select

Radio Group · In panel cards

Panel with click-to-select

Bordered card highlights on selection

For personal projects and experiments.

For client work and solo professionals.

For early-stage companies with growing teams.

Radio Group · Small cards

Compact grid cards

Used for memory, size, or tier selection

Radio Group · Table

Pricing table

Plan comparison with radio in first column

PlanUsersStoragePrice
Up to 5 users10 GB$9/mo
Up to 25 users50 GB$29/mo
Up to 100 users250 GB$79/mo