RadioGroup

The RadioGroup component provides a way to group related radio buttons with consistent styling, accessibility features, and form integration. It supports both horizontal and vertical layouts, different sizes, and integrates seamlessly with the Form component.

Examples

Basic Usage

Select theme

Light

Dark

System

<RadioGroup name="theme" legend="Select theme">
  <Radio value="light" label="Light" />
  <Radio value="dark" label="Dark" />
  <Radio value="system" label="System" />
</RadioGroup>

Horizontal Layout

Text alignment

Left

Center

Right

<RadioGroup name="alignment" legend="Text alignment" layout="horizontal">
  <Radio value="left" label="Left" />
  <Radio value="center" label="Center" />
  <Radio value="right" label="Right" />
</RadioGroup>

With Initial Value

Size

Small

Medium

Large

<RadioGroup name="size" legend="Size" value="md">
  <Radio value="sm" label="Small" />
  <Radio value="md" label="Medium" />
  <Radio value="lg" label="Large" />
</RadioGroup>

Different Sizes

<RadioGroup name="size-sm" legend="Small" size="sm" layout="horizontal">
  <Radio value="1" label="Option 1" />
  <Radio value="2" label="Option 2" />
  <Radio value="3" label="Option 3" />
</RadioGroup>

<RadioGroup name="size-md" legend="Medium" size="md" layout="horizontal">
  <Radio value="1" label="Option 1" />
  <Radio value="2" label="Option 2" />
  <Radio value="3" label="Option 3" />
</RadioGroup>

<RadioGroup name="size-lg" legend="Large" size="lg" layout="horizontal">
  <Radio value="1" label="Option 1" />
  <Radio value="2" label="Option 2" />
  <Radio value="3" label="Option 3" />
</RadioGroup>

Disabled State

Unavailable options

Option 1

Option 2

Option 3

<RadioGroup name="disabled-group" legend="Unavailable options" disabled={true}>
  <Radio value="1" label="Option 1" />
  <Radio value="2" label="Option 2" />
  <Radio value="3" label="Option 3" />
</RadioGroup>

Props

Prop	Type	Default	Description
`name`	`string`	Required	Name attribute for the radio group
`value`	`string`	`''`	Currently selected value
`legend`	`string`	Required	Legend text for the fieldset
`required`	`boolean`	`false`	Whether the radio group is required
`disabled`	`boolean`	`false`	Whether the radio group is disabled
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of radio buttons
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the radio buttons
`id`	`string`	`auto-generated`	HTML id for accessibility
`class`	`string`	`''`	Additional CSS classes

Events

Event	Detail Type	Description
`onchange`	`{ value: string }`	Fired when a radio button is selected

Accessibility

The RadioGroup component follows WAI-ARIA guidelines for radio groups:

Uses semantic <fieldset> and <legend> elements
Proper grouping of related radio buttons
Keyboard navigation between options
Focus states with visible indicators
Proper disabled states
Integrates with form validation

Keyboard Interaction

Tab - Move focus to the radio group
Space - Select the focused radio button
Arrow Up/Left - Move to previous radio button in the group
Arrow Down/Right - Move to next radio button in the group