Label

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Label component provides accessible form labels that are properly associated with form controls. Built on Radix UI primitives, it ensures proper accessibility and supports all standard HTML label attributes.

Basic Usage

Email Address

Label with Required Indicator

Full Name *

Label with Checkbox

I agree to the terms and conditions

Label with Switch

Enable email notifications

Form Example

First Name

Last Name

Email Address *

Message

Label Styling Variations

Default Label

Large Label

Muted Label

Error Label

Properties

Label

Property	Type	Description
htmlFor	string	The id of the form control this label is associated with.
className	string	Additional CSS classes for custom styling.
children	React.ReactNode	The label text or content.
onClick	(event: MouseEvent) => void	Event handler called when the label is clicked.

Accessibility

The Label component includes comprehensive accessibility features:

• Form Association - Properly associates labels with form controls using htmlFor
• Screen Reader Support - Provides accessible names for form controls
• Click Handling - Clicking the label focuses the associated form control
• Keyboard Navigation - Works seamlessly with keyboard navigation
• Disabled State Support - Automatically handles disabled form control states

Common Use Cases

The Label component is perfect for:

• Form Fields - Text inputs, email fields, password fields
• Checkboxes and Radio Buttons - Providing clickable labels
• Switches and Toggles - Describing toggle functionality
• Select Dropdowns - Labeling selection controls
• File Uploads - Describing file input fields
• Text Areas - Labeling multi-line text inputs

Best Practices

1. Always Use Labels - Every form control should have an associated label
2. Clear and Descriptive - Use clear, descriptive text that explains the field
3. Required Indicators - Mark required fields with visual indicators
4. Consistent Styling - Maintain consistent label styling throughout forms
5. Proper Association - Always use htmlFor to associate labels with controls
6. Error States - Update label styling to indicate validation errors
7. Accessibility First - Ensure labels work well with screen readers
8. Mobile Friendly - Make labels touch-friendly on mobile devices