RadioGroup

A set of radio buttons that allow users to select a single option from a list

Installation

pnpm add @wandercom/design-system-web

Usage

import { RadioGroup, RadioGroupItem } from '@wandercom/design-system-web/ui/radio-group';
import { Label } from '@wandercom/design-system-web/ui/label';

export function Example() {
  return (
    <RadioGroup defaultValue="option-1">
      <div className="flex items-center gap-2.5">
        <RadioGroupItem value="option-1" id="option-1" />
        <Label htmlFor="option-1">Option 1</Label>
      </div>
      <div className="flex items-center gap-2.5">
        <RadioGroupItem value="option-2" id="option-2" />
        <Label htmlFor="option-2">Option 2</Label>
      </div>
    </RadioGroup>
  );
}

Examples

Default

Radio group with a default value set and without a default value set.

Loading example...
<div className="flex flex-col gap-8 lg:flex-row">
  <RadioGroup defaultValue="option-1">
    <div className="flex items-center gap-2.5">
      <RadioGroupItem id="option-1" value="option-1" />
      <Label htmlFor="option-1">Default selected</Label>
    </div>
    <div className="flex items-center gap-2.5">
      <RadioGroupItem id="option-2" value="option-2" />
      <Label htmlFor="option-2">Option 2</Label>
    </div>
    <div className="flex items-center gap-2.5">
      <RadioGroupItem id="option-3" value="option-3" />
      <Label htmlFor="option-3">Option 3</Label>
    </div>
  </RadioGroup>

  <RadioGroup>
    <div className="flex items-center gap-2.5">
      <RadioGroupItem id="unset-1" value="option-1" />
      <Label htmlFor="unset-1">Option 1</Label>
    </div>
    <div className="flex items-center gap-2.5">
      <RadioGroupItem id="unset-2" value="option-2" />
      <Label htmlFor="unset-2">Option 2</Label>
    </div>
    <div className="flex items-center gap-2.5">
      <RadioGroupItem id="unset-3" value="option-3" />
      <Label htmlFor="unset-3">Option 3</Label>
    </div>
  </RadioGroup>
</div>

Disabled

Loading example...
<RadioGroup defaultValue="option-1">
  <div className="flex items-center gap-2.5">
    <RadioGroupItem disabled id="disabled-1" value="option-1" />
    <Label htmlFor="disabled-1">Disabled option</Label>
  </div>
  <div className="flex items-center gap-2.5">
    <RadioGroupItem disabled id="disabled-2" value="option-2" />
    <Label htmlFor="disabled-2">Disabled option</Label>
  </div>
</RadioGroup>

Props

RadioGroup

defaultValue?

string
The default selected value when the component is first rendered.

value?

string
The controlled selected value.

onValueChange?

(value: string) => void
Callback fired when the selected value changes.

disabled?

boolean
Disables all radio items in the group.

required?

boolean
Makes the radio group required in forms.

name?

string
The name of the radio group for form submission.

orientation?

'horizontal' | 'vertical'
The orientation of the radio group. Affects keyboard navigation direction.

className?

string
Additional CSS classes to apply.

RadioGroupItem

value

string
The unique value of this radio item.

id?

string
ID for associating with a Label element.

disabled?

boolean
Disables this specific radio item.

className?

string
Additional CSS classes to apply.

Accessibility

The RadioGroup component is built on the Radix UI Radio Group primitive, which provides full WAI-ARIA compliance out of the box.

  • Renders with role="radiogroup" on the container and role="radio" on each item, with proper aria-checked state management
  • Supports keyboard interaction: Arrow Up and Arrow Down (or Arrow Left and Arrow Right) move focus between items, Space selects the focused item
  • Use a Label component with a matching htmlFor and id to associate a visible label with each radio item
  • Focus is indicated with a visible ring for keyboard navigation
  • Disabled items apply reduced opacity and prevent interaction
  • Supports aria-invalid styling for form validation error states
RadioGroup