Overview

The @palmerhq/radio-group is a React component designed to facilitate the creation of accessible radio groups in line with WAI-ARIA 1.1 standards. This component not only streamlines the implementation of radio buttons but also ensures a smooth user experience with a focus on accessibility. By adhering to modern standards, it allows developers to create responsive and user-friendly interfaces that accommodate diverse user needs.

Incorporating this radio group into your projects can enhance user engagement and accessibility, encouraging developers to adopt best practices when building form components. With features that focus on keyboard navigation, hover styling, and comprehensive interactivity, this tool is a significant step towards creating inclusive web applications.

Features

Accessible Design: Built with WAI-ARIA 1.1 compliance to ensure all users can navigate and interact with the radio buttons effectively.
Customizable Labeling: The labelledBy property allows you to link the radio group with an associated label, enhancing accessibility through clear identifiers.
Interactive Callbacks: The onChange function fires when a new selection is made, providing real-time feedback on user choices.
Dynamic Child Components: The radio group specifically requires children as <Radio> components, ensuring uniform behavior and styling across sibling elements.
Focus Management: Options for onFocus and onBlur callbacks help track user interactions, enhancing the experience for keyboard and screen reader users.
AutoFocus Feature: With the autoFocus property, the initially selected radio button can be brought into focus automatically, streamlining user interactions.
Styling Flexibility: Default styles can be overridden, allowing developers to maintain brand consistency while ensuring that the interactive elements remain prominent.
Visual Feedback: CSS selectors manage visual indicators for checked states and focus, providing clear cues about selected options and enhancing user perception.

Palmerhq

Monorepo Starter

Radio Group

React Suspense Starter