Input
Text entry field
A flexible and accessible Input component that supports various input types, icons, prefixes, suffixes, and validation states.
Overview
This comprehensive documentation provides detailed instructions on how to leverage the powerful Input component in your React projects. The Input component is a core element of the abaabil.input library, designed to enhance form interactions and data entry in your user interfaces.
import Input from 'abaabil.input';Key Features
Discover why Abaabil's Input component stands out:
- Support for various input types, including text, textarea, and more
- Customizable appearance with support for icons, prefixes, and suffixes
- Built-in accessibility features with proper ARIA attributes
- Validation states with error, helper, and success messages
- Flexible styling options using Tailwind CSS classes
Basic Usage
The Input component is designed to provide a flexible and customizable input field that can be used for various purposes in your React projects. It supports different input types, including text areas, and offers features like icons, prefixes, and suffixes.
Input Types
The Input component supports various input types. Here are examples of each type:
Properties
The Input component accepts the following properties:
- id
Type:
stringDescription: Unique identifier for the input element.
- type
Type:
stringDescription: Type of the input (e.g., 'text', 'password', 'email').
Default:
'text'- label
Type:
stringDescription: Label text for the input field.
- prefix
Type:
ReactNodeDescription: Content to display before the input field.
- leadingIcon
Type:
stringDescription: Icon to display at the start of the input field.
- placeholder
Type:
stringDescription: Placeholder text for the input field.
- trailingIcon
Type:
stringDescription: Icon to display at the end of the input field.
- suffix
Type:
ReactNodeDescription: Content to display after the input field.
- containerClassName
Type:
stringDescription: Additional CSS classes for the container element.
- labelClassName
Type:
stringDescription: Additional CSS classes for the label element.
- prefixAndSuffixClassName
Type:
stringDescription: Additional CSS classes for the prefix and suffix elements.
- inputClassName
Type:
stringDescription: Additional CSS classes for the input element.
- disabled
Type:
booleanDescription: Whether the input is disabled.
- errorText
Type:
stringDescription: Error message to display below the input.
- helperText
Type:
stringDescription: Helper text to display below the input.
- successText
Type:
stringDescription: Success message to display below the input.
- ariaLabel
Type:
stringDescription: Accessibility label for the input when no visible label is provided.
- ariaDescribedBy
Type:
stringDescription: ID of the element that describes the input for accessibility purposes.
- ariaRequired
Type:
booleanDescription: Indicates whether the input is required for accessibility purposes.
Accessibility
The Input component is designed with accessibility as a top priority:
- Proper labeling using either visible labels or aria-label
- Support for aria-describedby to associate helper and error text
- Appropriate aria-invalid and aria-errormessage attributes for error states
- Clear indication of required fields using aria-required
Styling
The Input component uses Tailwind CSS classes for styling:
- Customizable container, label, input, and message appearances through className props
- Support for leading and trailing icons
- Prefix and suffix styling options
- Responsive design with proper spacing and sizing
Best Practices
Follow these best practices when using the Input component:
- Always provide a label or aria-label for accessibility
- Use appropriate input types (e.g., 'email' for email addresses)
- Provide clear and concise error messages for validation
- Use helper text to provide additional context or instructions
- Consider using icons to enhance visual recognition of input purpose
Variants
The Input component supports several variants:
- Standard text input
- Textarea for multiline input
- Input with leading and/or trailing icons
- Input with prefix and/or suffix
- Disabled input
Error Handling
The Input component provides built-in error handling features:
- Display error messages using the errorText prop
- Automatically sets aria-invalid and aria-errormessage for accessibility
- Visual indication of error state through styling
Integration with Form Libraries
The Input component can be easily integrated with popular form libraries:
- Compatible with React Hook Form
- Can be used with Formik
- Works well with Redux Form
Performance Considerations
The Input component is optimized for performance:
- Uses React.forwardRef for efficient ref forwarding
- Minimizes re-renders by using React.useId for generating unique IDs
- Efficiently handles conditional rendering of icons and additional content
Customization Examples
Explore these customization examples to tailor the Input component to your needs: