Option Selector
Multiple choice input
A flexible OptionSelector component that creates a group of radio buttons or checkboxes with support for icons, helper text, and various accessibility features.
Overview
This documentation provides instructions on how to use the OptionSelector component in your React projects. The OptionSelector component is part of the abaabil.optionselector library.
import OptionSelector from 'abaabil.optionselector';Key Features
- Support for both radio button and checkbox groups
- Customizable icons for selected state
- Individual helper text for each option
- Comprehensive accessibility features
- Support for error, helper, and success messages
- Keyboard navigation support
Basic Usage
The OptionSelector component is designed to provide a flexible and customizable selection interface that can be used for various purposes in your React projects. It supports both radio button and checkbox group configurations, and offers features like helper text, error states, and custom styling.
Checkbox Group with Helper Text
Required Radio Group with Error
Checkbox Group with Disabled Option and Success Message
Radio Group with Custom Icon and Option Helper Text
Styled Checkbox Group
Radio Group with All Props
Properties
The OptionSelector component accepts the following properties:
- icon
Type:
stringDescription: Custom icon ID for the selected state.
- multi
Type:
booleanDescription: If true, renders as a checkbox group; otherwise, as a radio button group.
- name
Type:
stringDescription: Name attribute for the input elements.
- options
Type:
Array<{ value: string, label: string, helper?: string, disabled?: boolean }>Description: Array of option objects defining the selectable items.
- className
Type:
stringDescription: Additional CSS classes to apply to the component.
Default:
''- onChange
Type:
functionDescription: Callback function triggered when an option is selected or deselected.
- legend
Type:
stringDescription: Text to display as the legend for the fieldset.
- required
Type:
booleanDescription: Indicates if the field is required.
Default:
false- errorText
Type:
stringDescription: Error message to display.
- helperText
Type:
stringDescription: Helper text to display below the legend.
- successText
Type:
stringDescription: Success message to display.
Accessibility
The OptionSelector component is designed with accessibility in mind:
- Uses semantic HTML with fieldset and legend elements
- Implements proper ARIA attributes for group, required, and error states
- Supports keyboard navigation and interaction
- Provides visual feedback for focus and selected states
Styling
The OptionSelector component uses Tailwind CSS classes for styling:
- Customizable icon and label appearances
- Support for disabled state styling
- Responsive design with proper spacing and sizing
- Visual indicators for focus and selected states
Best Practices
Follow these best practices when using the OptionSelector component:
- Always provide a descriptive legend for the option group
- Use clear and concise labels for each option
- Provide helper text for options that may need additional explanation
- Use the multi prop appropriately based on whether single or multiple selections are allowed
Error Handling
The OptionSelector component handles errors and provides feedback:
- Displays an error message if invalid or empty options are provided
- Supports custom error messages through the errorText prop
- Uses appropriate ARIA attributes to communicate error states to assistive technologies