Label

A text label component that can be associated with form controls.

Usage

import { Label } from "@rhinolabs/ui"

export default function LabelDemo() {
  return (
    <div>
      <Label htmlFor="email">Email</Label>
      <input id="email" type="email" />
    </div>
  )
}

Examples

Basic Label

A simple label for an input field.

<div className="grid gap-1.5">
  <Label htmlFor="name">Name</Label>
  <input id="name" type="text" />
</div>

Required Field

Label indicating a required field.

<div className="grid gap-1.5">
  <Label htmlFor="email" className="after:content-['*'] after:ml-0.5 after:text-red-500">
    Email
  </Label>
  <input id="email" type="email" required />
</div>

With Description

Label with additional description text.

<div className="grid gap-1.5">
  <Label htmlFor="picture">Profile Picture</Label>
  <span className="text-sm text-muted-foreground">
    Upload a picture to personalize your profile.
  </span>
  <input id="picture" type="file" accept="image/*" />
</div>

Props

The Label component extends the HTML label element props.

Prop	Type	Description
htmlFor	string	ID of the associated form control
className	string	Additional CSS classes

Design Considerations

• Use clear and concise text
• Maintain consistent styling
• Position labels appropriately
• Consider field requirements
• Use proper text contrast

Accessibility

• Associates with form controls
• Supports screen readers
• Maintains proper contrast
• Uses semantic markup
• Handles disabled states