Radio-group

Set of checkable buttons where only one can be checked at a time.

About RadioGroup

A set of checkable buttons—radio buttons—where only one option can be selected at a time. Includes RadioGroupItem for individual radio buttons with built-in styling and focus indicators. The component adheres to the WAI-ARIA Radio Group design pattern and uses roving tabindex to manage focus movement among items.

Installation

Import the RadioGroup component from LSD:

import { RadioGroup } from '@nipsys/lsd'

export default function MyComponent() {
  return <RadioGroup />
}

Usage

The simplest form of the component with default styling.

Basic

Features

Additional features and capabilities of the component.

Disabled

Composition

RadioGroup

└── RadioGroupItem

API Reference

Radix UI Documentation

RadioGroup wraps Radix UI primitives

View Radix UI RadioGroup documentation →

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.

Keyboard Navigation

Keyboard shortcuts and navigation

• Tab - Moves focus to the checked radio item or first radio item in the group• Space - Checks the currently focused RadioGroupItem• ArrowDown/ArrowUp - Moves focus and checks next/previous RadioGroupItem• ArrowRight/ArrowLeft - Moves focus and checks next/previous RadioGroupItem

ARIA Attributes

Proper ARIA attributes for screen readers

• role="radiogroup" is set on RadioGroup• role="radio" is set on each RadioGroupItem• aria-checked indicates checked/unchecked state• aria-disabled indicates disabled state• Uses roving tabindex for focus management

Focus States

Visible focus indicators for keyboard users

• Focus moves to the checked radio item or the first radio item when navigating to the group. Arrow keys navigate between items, moving focus and checking the target item. The component uses roving tabindex to ensure only one radio item is in the tab sequence at a time.

Form

Slider