Labels

Label components for form fields and UI elements with proper accessibility support and semantic markup.

Basic Label

Your email address

<Label htmlFor="email">Your email address</Label>

Label with Input Examples

Basic Label with Input

Label for Disabled Input

Email (Disabled)

Required Field Label

Email *

Label with Helper Text

Email Address

We'll never share your email with anyone else.

Label Variants

Default Size

Default Label

Small Label

Large Label

Implementation Notes

The Label component (@/components/ui/label.tsx) provides semantic labeling for form controls with proper accessibility support.

Accessibility: Always use the htmlFor attribute to associate labels with their corresponding form controls.

Required fields: Use a red asterisk (*) to indicate required fields.

Helper text: Provide additional context with helper text below the input.

Disabled state: Labels for disabled inputs should use muted text color.

Usage Examples

// Basic label with input
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" />

// Required field
<Label htmlFor="password">
  Password <span className="text-red-500">*</span>
</Label>
<Input type="password" id="password" required />

// With helper text
<Label htmlFor="username">Username</Label>
<Input type="text" id="username" />
<p className="text-sm text-muted">
  Choose a unique username
</p>