Radio Group

A composable, accessible RadioGroup component for modern React applications.

import { RadioGroup } from '@nofinite/nui';

Interactive Preview

A controlled/uncontrolled selection component that enables users to choose a single option from a set while preserving native radio behavior, accessibility semantics, keyboard navigation, and layout orientation control.

Implements a compound component architecture with context-driven state synchronization between RadioGroup and RadioGroup.Item.

Usage

Basic Usage

import { RadioGroup } from '@nofinite/nui';

<RadioGroup defaultValue="apple">
  <RadioGroup.Item value="apple" />
  <RadioGroup.Item value="banana" />
  <RadioGroup.Item value="orange" />
</RadioGroup>;

Controlled Usage

const [value, setValue] = useState('apple');

<RadioGroup value={value} onChange={setValue}>
  <RadioGroup.Item value="apple" />
  <RadioGroup.Item value="banana" />
</RadioGroup>;

Horizontal Orientation

<RadioGroup orientation="horizontal" defaultValue="a">
  <RadioGroup.Item value="a" />
  <RadioGroup.Item value="b" />
  <RadioGroup.Item value="c" />
</RadioGroup>

Disabled Group

<RadioGroup disabled defaultValue="a">
  <RadioGroup.Item value="a" />
  <RadioGroup.Item value="b" />
</RadioGroup>

RadioGroup.Item

Variants

<RadioGroup defaultValue="a" />                      // Vertical (default)
<RadioGroup orientation="horizontal" />              // Horizontal
<RadioGroup disabled />                              // Disabled
<RadioGroup value="a" />                             // Controlled

Available variants

• vertical — Stacked layout
• horizontal — Inline layout
• disabled — Non-interactive group
• controlled — External state management
• uncontrolled — Internal state management

Guidelines

• Use controlled mode for form libraries
• Prefer horizontal layout for small option sets
• Maintain consistent naming for grouping semantics
• Use disabled state to prevent invalid selections

States

Keyboard Interaction

Native browser radio semantics ensure automatic roving focus and selection behavior.

Accessibility

• Implements role="radiogroup"
• Uses native <input type="radio"> for full accessibility support
• Automatic shared name attribute for grouping semantics
• Supports aria-orientation
• Uses aria-checked state synchronization
• Focus-visible ring for keyboard navigation
• Compatible with <label htmlFor> associations

Best Practices

Do

• Use consistent values across items
• Provide labels using <label htmlFor>
• Prefer controlled mode for form integration
• Group logically related options
• Use horizontal layout only for limited choices

Don’t

• Use radios for multi-select scenarios
• Leave items without accessible labels
• Mix controlled and uncontrolled patterns
• Overcrowd horizontal layouts
• Disable individual items without context

API Reference