Skip to main content
Back to Home

Radio Group

An accessible radio group component for single-select scenarios. Features arrow key navigation using the roving tabindex pattern and proper ARIA attributes.

Basic Usage

Simple radio group with arrow key navigation.

Select a size
Selected: medium
import { useState } from 'react';
import { AccessibleRadioGroup } from '@a13y/react';

function Example() {
  const [value, setValue] = useState('option1');

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' }
  ];

  return (
    <AccessibleRadioGroup
      legend="Select an option"
      name="example"
      options={options}
      value={value}
      onChange={setValue}
    />
  );
}

With Descriptions

Add descriptions to provide more context for each option.

Choose a plan

RadioGroup Props

NameTypeDefaultDescription
legend*string-Label for the radio group (rendered as fieldset legend)
name*string-Name attribute for the radio inputs
options*RadioOption[]-Array of radio options
value*string-Currently selected value
onChange*(value: string) => void-Callback fired when selection changes
disabledbooleanfalseDisable all radio buttons in the group
errorstring-Error message to display
classNamestring-Optional CSS class for the fieldset

RadioOption Props

NameTypeDefaultDescription
value*string-Value of the radio option
label*string-Label text for the radio button
descriptionstring-Optional description text shown below the label

Keyboard Navigation

↓Move to next option
↑Move to previous option
SpaceSelect focused option
TabExit radio group

Accessibility Features

  • ✓Uses fieldset and legend for semantic grouping
  • ✓Arrow key navigation with roving tabindex pattern
  • ✓Each radio button properly associated with its label via for/id
  • ✓Descriptions linked via aria-describedby
  • ✓Error messages announced to screen readers