Label

A text label component for form inputs built on Radix UI with proper accessibility support.

Usage

Basic Label

import { Label, Input } from "@prisma-docs/eclipse";

export function BasicLabel() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="Enter your email" />
    </div>
  );
}

Live Example:

Label with Required Indicator

import { Label, Input } from "@prisma-docs/eclipse";

export function RequiredLabel() {
  return (
    <div className="space-y-2">
      <Label htmlFor="username">
        Username <span className="text-foreground-error">*</span>
      </Label>
      <Input id="username" placeholder="Enter username" required />
    </div>
  );
}

Live Example:

Username *

Multiple Inputs with Labels

import { Label, Input } from "@prisma-docs/eclipse";

export function MultipleLabels() {
  return (
    <div className="space-y-4 max-w-md">
      <div className="space-y-2">
        <Label htmlFor="first-name">First Name</Label>
        <Input id="first-name" placeholder="John" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="last-name">Last Name</Label>
        <Input id="last-name" placeholder="Doe" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="email-multi">Email</Label>
        <Input id="email-multi" type="email" placeholder="john@example.com" />
      </div>
    </div>
  );
}

Live Example:

First Name

Last Name

Disabled State

Labels automatically adapt when associated with disabled inputs:

import { Label, Input } from "@prisma-docs/eclipse";

export function DisabledLabel() {
  return (
    <div className="space-y-4 max-w-md">
      <div className="space-y-2">
        <Label htmlFor="enabled">Enabled Field</Label>
        <Input id="enabled" placeholder="This is enabled" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="disabled">Disabled Field</Label>
        <Input id="disabled" placeholder="This is disabled" disabled />
      </div>
    </div>
  );
}

Live Example:

Enabled Field

Disabled Field

Label with Helper Text

import { Label, Input } from "@prisma-docs/eclipse";

export function LabelWithHelper() {
  return (
    <div className="space-y-2 max-w-md">
      <Label htmlFor="password">
        Password
      </Label>
      <Input id="password" type="password" placeholder="Enter password" />
      <span className="text-sm text-foreground-neutral-weak">
        Must be at least 8 characters
      </span>
    </div>
  );
}

Live Example:

Password

Must be at least 8 characters

Inline Layout

import { Label, Input } from "@prisma-docs/eclipse";

export function InlineLabel() {
  return (
    <div className="flex items-center gap-4 max-w-md">
      <Label htmlFor="search" className="flex-shrink-0">
        Search:
      </Label>
      <Input id="search" placeholder="Type to search..." />
    </div>
  );
}

Live Example:

Search:

Grid Layout

import { Label, Input } from "@prisma-docs/eclipse";

export function GridLabels() {
  return (
    <div className="grid grid-cols-2 gap-4 max-w-md">
      <div className="space-y-2">
        <Label htmlFor="first">First Name</Label>
        <Input id="first" placeholder="John" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="last">Last Name</Label>
        <Input id="last" placeholder="Doe" />
      </div>
    </div>
  );
}

Live Example:

First Name

Last Name

Form Example

import { Label, Input, Button } from "@prisma-docs/eclipse";

export function FormWithLabels() {
  return (
    <form className="space-y-4 max-w-md">
      <div className="space-y-2">
        <Label htmlFor="form-name">
          Name <span className="text-foreground-error">*</span>
        </Label>
        <Input id="form-name" placeholder="Enter your name" required />
      </div>
      
      <div className="space-y-2">
        <Label htmlFor="form-email">
          Email <span className="text-foreground-error">*</span>
        </Label>
        <Input id="form-email" type="email" placeholder="you@example.com" required />
      </div>
      
      <div className="space-y-2">
        <Label htmlFor="form-phone">Phone</Label>
        <Input id="form-phone" type="tel" placeholder="(555) 555-5555" />
      </div>
      
      <Button type="submit">Submit</Button>
    </form>
  );
}

Live Example:

Component Props

Label

htmlFor - ID of the associated input element (string, required for accessibility)
className - Additional CSS classes (string, optional)
children - Label text or content (ReactNode, required)
All standard Radix UI Label props

Features

✅ Built on Radix UI for accessibility
✅ Proper association with form inputs via htmlFor
✅ Automatically styled for disabled states
✅ Consistent typography and spacing
✅ Clickable to focus associated input
✅ Screen reader friendly
✅ Supports nested content
✅ Fully typed with TypeScript
✅ Customizable with className prop

Best Practices

Always use htmlFor attribute that matches the input's id
Keep label text clear, concise, and descriptive
Use required indicators (*) for required fields
Place labels above inputs for better mobile UX (vertical layout)
Don't rely solely on placeholder text - always use labels
Use helper text below inputs for additional context
Keep labels visible (don't hide them for accessibility)
Use sentence case for label text
Avoid ending labels with colons unless in inline layouts

Common Use Cases

The Label component is perfect for:

Form fields - Labeling all types of form inputs
Login forms - Email and password labels
Registration - User information fields
Settings - Configuration options
Search fields - Search input labels
Filters - Filter criteria labels
Contact forms - Contact information fields
Checkout forms - Payment and shipping labels

Accessibility

The Label component follows accessibility best practices:

Uses Radix UI's accessible label primitive
Properly associates with inputs via htmlFor attribute
Clicking label focuses the associated input
Screen readers announce the label when input is focused
Supports all ARIA attributes
Works with assistive technologies
Automatically applies disabled styling when associated with disabled inputs
Provides semantic meaning to form controls

Styling

The Label component uses design tokens:

Font size: text-sm (14px)
Font weight: font-medium (500)
Line height: leading-none
Disabled opacity: peer-disabled:opacity-70
Cursor: peer-disabled:cursor-not-allowed on disabled inputs

Customize by passing className:

<Label htmlFor="custom" className="text-lg font-bold text-blue-600">
  Custom Label
</Label>

Integration with Other Components

Label works seamlessly with:

Input - Text inputs, email, password, etc.
Field - Use with Field component for complete form fields
Checkbox - Label checkbox inputs
Radio - Label radio button inputs
Select - Label dropdown selections
Textarea - Label multi-line text inputs
Switch - Label toggle switches

Examples with Other Input Types

With File Input

Upload Document

With Date Input

Date of Birth

With Number Input

Age

Label

On this page