Components
Radio Group
An accessible and customizable radio group component for single-option selection with advanced styling capabilities.
Introduction
The RadioGroup component provides a flexible and accessible way to implement single-option selection in your application. It supports custom styles, labels, and ARIA roles to enhance usability and accessibility.
Default Use Case: Simple Radio Group
Simple Radio Group
Installation
Install the RadioGroup component:
File Structure
radio-group.tsx
Advanced Use Cases
Colored Radio Group
Colored Radio Group
Disabled Radio Group
Disabled Radio Group
Prop Types
| Prop | Type | Default |
|---|---|---|
value | string | - |
className | string | - |
disabled | boolean | - |
Features
- Customizable:
- Apply custom styles for individual radio items or the group.
- Dynamic Validation:
- Easily integrate with form libraries like
react-hook-form.
- Easily integrate with form libraries like
- Flexible Layout:
- Supports horizontal and vertical arrangements.
Accessibility
- Keyboard Navigation:
- Navigate using
Tab, and select with arrow keys.
- Navigate using
- Screen Reader Support:
- Includes
aria-checkedand other ARIA attributes for assistive technologies.
- Includes
- Error Indicators:
- Clearly indicate validation errors.
Conclusion
The RadioGroup component is a versatile and accessible solution for single-option selection, with support for styling, layout flexibility, and advanced use cases.