Label
Form label with required indicators, tooltip integration, and for attribute association
Label
Accessible form labels with support for required / optional indicators, descriptions, errors, help text and a composition API.
Basic labels
Use Label with htmlFor to create accessible labels linked to inputs and textareas.
Color variants
Use variant to match labels with visual intent like primary, success, warning or error.
Sizes
Adjust label size with the size prop to match the density of the associated input.
Required & optional
Use required or optional, or customize the indicator with requiredIndicator.
With descriptions
Use LabelDescription to provide additional context beneath a label.
Error messages
Combine Label with LabelError and error styling on the input to surface validation issues.
Help & tooltips
Show inline help or tooltip-style explanations via showHelp and helpText.
Label groups
Use LabelGroup to align and space sets of labeled controls either vertically or horizontally.
Vertical group
Horizontal group
States
Reflect control states visually by pairing label props with input states, such as disabled or error.
Composition API
Combine LabelRequired, LabelOptional and LabelDescription inline for more expressive forms.
Profile details
Usage Guidelines
When to Use
- Form field labels
- Required indicators
- Input descriptions
Accessibility
- For attribute association
- Required indicator announced
Performance
- Native label element
- Zero overhead
Common Mistakes
- Label not associated with input
- Required indicator unclear
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support