Label
A text label component for form controls that provides accessible labeling.
Basic Label
Standard label with text input field.
With Checkbox
Label paired with a checkbox control.
With Switch
Label paired with a toggle switch.
Required Field
Label with required field indicator.
With Description
Label with helper text for additional context.
Must be at least 8 characters with one uppercase letter and one number.
Disabled State
Labels inherit disabled styling from peer elements.
Inline Labels
Labels displayed inline with form controls.
With Textarea
Label for multi-line text input.
0/500 characters
Error State
Label with error indication.
Please enter a valid email address.
Optional Field
Label indicating an optional field.
Checkbox Group
Labels for a group of related checkboxes.
Settings with Switches
Labels with switches in a settings layout.
Enable dark theme for the interface
Automatically save changes
Help improve by sending usage data
Complete Form Example
A real-world form demonstrating various label patterns.
Accessibility Note
Labels are essential for accessibility. Always use the htmlFor attribute to associate labels with their form controls.
Best practices:
- Use
htmlForto link labels to inputs - Include required field indicators
- Provide helpful error messages
- Keep labels concise and descriptive