Select
Option list selector
A flexible Select component that creates a dropdown menu with support for option groups, accessibility features, and various states including disabled and required.
Overview
This documentation provides instructions on how to use the Select component in your React projects. The Select component is part of the abaabil.select library.
import Select from 'abaabil.select';Key Features
- Support for both single options and option groups
- Customizable styling for label and select elements
- Accessibility features including ARIA attributes
- Support for disabled and required states
- Integration with error, helper, and success messages
- Forwarded ref for advanced control
Basic Usage
The Select component provides a user-friendly interface for selecting one option from a list. It supports both single-level options and grouped options (using optgroups).
Select with Disabled Option
Select with Option Groups
Disabled Select
Required Select
Properties
The Select component accepts the following properties:
- id
Type:
stringDescription: Unique identifier for the select element.
- name
Type:
stringDescription: Name attribute for the select element.
- options
Type:
Array<{ value: string, label: string, options?: Array<{ value: string, label: string }> }>Description: Array of option objects or option group objects.
- label
Type:
stringDescription: Label text for the select element.
- value
Type:
stringDescription: Current value of the select element.
- onChange
Type:
functionDescription: Callback function triggered when the selected option changes.
- labelClassName
Type:
stringDescription: Additional CSS classes to apply to the label element.
- selectClassName
Type:
stringDescription: Additional CSS classes to apply to the select element.
- disabled
Type:
booleanDescription: Whether the select element is disabled.
- required
Type:
booleanDescription: Whether the select element is required.
- errorText
Type:
stringDescription: Error message to display below the select element.
- helperText
Type:
stringDescription: Helper text to display below the select element.
- successText
Type:
stringDescription: Success message to display below the select element.
Accessibility
The Select component is designed with accessibility in mind:
- Uses semantic HTML with proper labeling
- Implements ARIA attributes for required, invalid, and description states
- Provides clear association between label and select element
- Supports keyboard navigation native to select elements
Styling
The Select component uses Tailwind CSS classes for styling:
- Customizable label and select element appearance through className props
- Support for different states (hover, focus, active, disabled)
- Consistent sizing and spacing
- Integrated styling for error, helper, and success messages
Best Practices
Follow these best practices when using the Select component:
- Provide clear and concise labels for the select element
- Use option groups to organize related options when appropriate
- Implement proper validation and display error messages when necessary
- Use helper text to provide additional context or instructions
Integration with Form Libraries
The Select component can be easily integrated with popular form libraries:
- Compatible with React Hook Form using the ref prop
- Can be used with Formik by connecting the appropriate props
- Works well with Redux Form when wrapped in a field component