Radio Group

Radio groups are for decisions where exactly one option should define the state. The Swiss wrapper keeps the Radix keyboard and accessibility behavior, then reduces the visual treatment so the label and supporting copy can carry the real comparison.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<RadioGroup defaultValue="public">
  <label className="flex items-center gap-3">
    <RadioGroupItem value="public" id="public" />
    <Label htmlFor="public">Public issue</Label>
  </label>
  <label className="flex items-center gap-3">
    <RadioGroupItem value="private" id="private" />
    <Label htmlFor="private">Subscriber issue</Label>
  </label>
</RadioGroup>

Why This Primitive Exists

Radio groups solve the cases where a checkbox would imply independence and a select would hide the comparison.

• Use them when the user should compare a short list of mutually exclusive options before choosing one.
• Prefer them to a select when the option meaning benefits from visible supporting copy.
• Avoid them for long lists or cases where multiple options may be true at once.

Examples

Basic Choice

This is the smallest useful pattern: one value group, one clear default, and labels that explain the consequence.

<RadioGroup defaultValue="stable">
  <label className="flex items-center gap-3">
    <RadioGroupItem value="stable" id="stable" />
    <Label htmlFor="stable">Stable release</Label>
  </label>
</RadioGroup>

Form Rows

Radio groups become more legible when each choice owns a full row with a short explanation. This is a better fit than collapsing that guidance into placeholder text or a tooltip.

<RadioGroup defaultValue="curated" className="gap-0 border border-border">
  <label className="flex items-start justify-between gap-4 p-4">
    <div className="grid gap-1">
      <Label htmlFor="curated">Curated order</Label>
      <p className="text-sm text-muted-foreground">
        Preserves the sequence defined by the editorial team.
      </p>
    </div>
    <RadioGroupItem value="curated" id="curated" className="mt-1" />
  </label>
</RadioGroup>

In Context

Use radio groups inside publishing or configuration flows when the choice changes how the next step behaves.

Guidance

Prefer Visible Comparison For Short Lists

• Use radio groups when the list is short enough to scan without scrolling.
• If each option needs one or two lines of explanation, radios are usually clearer than a collapsed select.
• If the list is long, searchable, or grouped into many sections, switch to Select.

Keep Labels And Values Stable

• Make the visible label describe the resulting state, not the interaction.
• Keep option copy parallel so the differences are easy to compare.
• Use stable value strings because forms and workflow logic often depend on them directly.

Pair With Nearby Context

• Wrap the control and label in a clickable row when space allows.
• Add supporting text outside the indicator so the radio mark stays small and quiet.
• Use one radio group per decision. If two questions are unrelated, split them into separate groups.

API Reference

Exports

Notable Props

Visual Behavior

The wrapper is otherwise a thin layer over Radix Radio Group, so standard root and item props continue to work.