Label
A form control label used to associate descriptive text with form inputs.
When To Use
- When creating form fields that require associated text labels
- To ensure form controls have accessible labels for screen readers
- When you need to associate a label with an input component
- To provide clear context for form elements
Examples
Basic
The basic implementation of a label component associated with an input.
With Required Indicator
A label with a required field indicator.
Form Layout
Labels in a complete form layout with various input types.
Props
Accessibility
The Label component follows the WAI-ARIA label pattern for accessibility:
- Uses the native HTML
<label>
element, ensuring proper association with form controls - Supports the
htmlFor
attribute to explicitly associate labels with inputs via their IDs - Maintains proper focus states when labels are clicked
- Includes appropriate styling for disabled states
- Ensures sufficient color contrast for readability
When using the Label component:
- Always associate labels with their corresponding form controls
- Consider using the
required
attribute and visual indicators for required fields - Maintain clear, concise text that describes the purpose of the form control