Accessible label for form inputs. Built on Radix UI with automatic accessibility features and perfect RTL support.
Preview
Installation
Usage
Why Use Label?
Labels are critical for accessibility
- •Screen Readers: Labels are announced by screen readers, telling users what each field is for
- •Click Target: Clicking a label focuses its associated input, improving usability on mobile
- •Form Validation: Browsers use labels to provide better validation messages
- •WCAG Compliance: WCAG 2.1 requires all form inputs to have associated labels
Examples
With Input
Required Field
With Helper Text
Must be at least 8 characters long
Disabled State
Notice how the label automatically becomes muted when the input is disabled
Horizontal Layout
Complete Form
Custom Styling
Props
| Name | Type | Default | Description |
|---|---|---|---|
htmlFor | string | undefined | The ID of the form element this label is associated with |
className | string | undefined | Additional CSS classes to apply |
The Label component extends Radix UI's Label primitive and accepts all standard HTML label attributes.
Accessibility
Always Link Labels to Inputs
Use the htmlFor prop with the input's id:
Don't Use Placeholder Instead of Label
❌ Bad: Using only placeholder text (not accessible)
✓ Good: Using label with placeholder
Automatic Disabled Styling
Labels automatically style themselves when their associated input is disabled using the peer-disabled: utility classes.
Keyboard Navigation
Clicking a label focuses its associated input, improving keyboard workflow and mobile usability.
RTL Considerations
Labels automatically support RTL layout. Text alignment adapts based on the text direction.
LTR (English)
RTL (العربية)
Use Cases
Form field identification
Checkbox and radio descriptions
Accessible input associations
Required field indicators