Label
A flexible and accessible label component with variants for errors, helper text, and required indicators.
Enter your email address
Password is required
Installation
The Label component is a lightweight and customizable utility for form labels. Designed for accessibility and ease of use, it integrates seamlessly with form inputs.
Quickly add the component using:
Props
The Label component offers various props for flexibility and customization. Here’s a breakdown of its supported props:
| Prop | Type | Default |
|---|---|---|
htmlFor | string | - |
helperText | string | - |
error | string | - |
required | boolean | false |
children | React.ReactNode | - |
variant | "default" | "error" | "default" |
size | "default" | "large" | "default" |
className | string | - |
Features
The Label component is designed to enhance the user experience with intuitive and accessible labels:
- Customizable Variants:
- Offers default and error styles for different scenarios.
- Helper Text:
- Displays context or instructions for the associated input.
- Error Handling:
- Clearly indicates form validation errors with styled error messages.
- Required Indicator:
- Adds an asterisk to indicate required fields, improving form usability.
- Accessibility:
- Built with ARIA roles and best practices for screen reader compatibility.
Accessibility
The Label component adheres to modern accessibility standards:
- Associations:
- Links to form elements via the
htmlForattribute.
- Links to form elements via the
- Semantic Structure:
- Uses ARIA attributes for clear roles and relationships.
- Visual and Textual Feedback:
- Enhances clarity for users with disabilities.
Conclusion
The Label component simplifies form construction with its rich features, accessibility compliance, and easy customization. Whether you need basic labels or advanced error handling, it’s a reliable solution for modern web applications.