radio-group

Single-selection radio group with roving tabindex and arrow-key navigation.

A headless radio group following the WAI-ARIA radio pattern: single selection, roving tabindex, and arrow-key navigation.

import { RadioGroup, RadioGroupItem } from '@fluixi/radio-group';

<RadioGroup defaultValue="a" onChange={(v) => ...}>
  <RadioGroupItem value="a">A</RadioGroupItem>
  <RadioGroupItem value="b">B</RadioGroupItem>
  <RadioGroupItem value="c" disabled>C</RadioGroupItem>
</RadioGroup>

Controlled (value) or uncontrolled (defaultValue) with onChange.
orientation (vertical default | horizontal) drives arrow-key direction.
Items expose aria-checked, data-state, and a single roving tab stop.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

radio-group