RadioGroup

Alpha

An accessible radio group with roving tabindex, orientation support, and CSS customization.

Import

import { RadioGroup } from "@compa11y/react";

Usage

Example.tsx

import { useState } from "react";
import { RadioGroup } from "@compa11y/react";

function Example() {
  const [color, setColor] = useState("red");

  return (
    <RadioGroup value={color} onValueChange={setColor}>
      <RadioGroup.Radio value="red">Red</RadioGroup.Radio>
      <RadioGroup.Radio value="green">Green</RadioGroup.Radio>
      <RadioGroup.Radio value="blue">Blue</RadioGroup.Radio>
    </RadioGroup>
  );
}

Features

Roving tabindex pattern
Horizontal and vertical orientation
Arrow key navigation
Compound component API
CSS variable customization

Props

RadioGroup component props
Prop	Type	Default	Description
`value`	`string`	-	Controlled selected value
`onValueChange`	`(value: string) => void`	-	Called when selection changes
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	Layout orientation
`disabled`	`boolean`	`false`	Disables all radios

Sub-components

RadioGroup.Radio

RadioGroup.Radio props
Prop	Type	Default	Description
`value`*	`string`	-	Radio value
`children`*	`ReactNode`	-	Label text
`disabled`	`boolean`	`false`	Disables this radio

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for RadioGroup
Key	Action
`ArrowDown / ArrowRight`	Selects next radio
`ArrowUp / ArrowLeft`	Selects previous radio
`Home`	Selects first radio
`End`	Selects last radio