<h2>Overview</h2>
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.
<h2>Features</h2>
<ul>
<li>
Accessible Design: Built with WAI-ARIA 1.1 compliance to ensure all users can navigate and interact with the radio buttons effectively.
</li>
<li>
Customizable Labeling: The <code>labelledBy</code> property allows you to link the radio group with an associated label, enhancing accessibility through clear identifiers.
</li>
<li>
Interactive Callbacks: The <code>onChange</code> function fires when a new selection is made, providing real-time feedback on user choices.
</li>
<li>
Dynamic Child Components: The radio group specifically requires children as <code>&#x3C;Radio></code> components, ensuring uniform behavior and styling across sibling elements.
</li>
<li>
Focus Management: Options for <code>onFocus</code> and <code>onBlur</code> callbacks help track user interactions, enhancing the experience for keyboard and screen reader users.
</li>
<li>
AutoFocus Feature: With the <code>autoFocus</code> property, the initially selected radio button can be brought into focus automatically, streamlining user interactions.
</li>
</ul>

Palmerhq

Radio Group