Radio group

Single choice from a short list of options. Use when only one selection is valid.

Overview

Radio group manages mutually exclusive options. Each option is a Radio with a RadioIndicator for the selected dot. Built on Base UI for keyboard and focus behavior.

tsx

import { RadioGroup, Radio, RadioIndicator } from "@standard-ui/react"

<RadioGroup defaultValue="comfortable" aria-label="Density">
  <label className="flex items-center gap-2">
    <Radio value="compact">
      <RadioIndicator />
    </Radio>
    Compact
  </label>
  <label className="flex items-center gap-2">
    <Radio value="comfortable">
      <RadioIndicator />
    </Radio>
    Comfortable
  </label>
</RadioGroup>

Usage

Labeling

Wrap each radio in a label for a larger hit target. Name the group with aria-label or a visible legend.

tsx

<RadioGroup defaultValue="email" aria-label="Contact method">
  <label className="flex items-center gap-2">
    <Radio value="email">
      <RadioIndicator />
    </Radio>
    Email
  </label>
</RadioGroup>

Values

Each radio needs a unique value. Set defaultValue (or controlled value) on the group to the selected option.

tsx

<RadioGroup defaultValue="comfortable">
  <Radio value="compact"><RadioIndicator /></Radio>
  <Radio value="comfortable"><RadioIndicator /></Radio>
</RadioGroup>

API

Parts mirror Base UI Radio Group and Radio.

Part	Role
RadioGroup	Root that holds the selected value.
Radio	Single option. Requires a value.
RadioIndicator	Selected indicator inside the radio.

Prop	Type	Default	Description
defaultValue	string \| null	—	Uncontrolled initial selected value.
value	string \| null	—	Controlled selected value.
onValueChange	(value: string, event) => void	—	Called when the selection changes.
disabled	boolean	false	Disables the entire group.

Guidelines

Do

Use radios when exactly one option must be chosen
Keep the option list short — typically under seven items
Prefer a select when the list is long or the space is tight

Don't

Don't use radios for multi-select — use checkboxes
Don't leave the group without an accessible name
Don't mix unrelated choices in the same group

Examples