Label Component

The Label component provides accessible labels for form inputs and other interactive elements. Built on Radix UI for proper accessibility and keyboard navigation.

Basic Label

Email address

Label with Input

Full name

Label with Textarea

Message

Required Label

Required field *

Using Field Component

Disabled State

Disabled input

Label Styling Variants

Default Label

Large Label

Usage Example

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';

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

// With Field component
<Field>
  <Label htmlFor="username">Username</Label>
  <Input type="text" id="username" />
  <p className="text-sm text-pietra-vecchia">Helper text</p>
</Field>

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

Features

•Accessible: Built on Radix UI with proper ARIA attributes
•Form Integration: Works seamlessly with Input, Textarea, Select, etc.
•Keyboard Navigation: Properly associated with form controls
•Flexible: Supports custom styling and variants
•Disabled State: Automatically handles disabled form controls