Label

Renders an accessible label associated with controls, built on top of Radix UI Label primitive.

Installation

npm install @darksnow-ui/label

Peer Dependencies

npm install react react-dom

Usage

import { Label } from "@darksnow-ui/label"
import { Input } from "@darksnow-ui/input"

export function LabelExample() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

Examples

Basic Label

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

Required Fields

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email-required">
    Email <span className="text-theme-danger">*</span>
  </Label>
  <Input type="email" id="email-required" placeholder="Email" required />
</div>

With Textarea

<div className="grid w-full max-w-sm gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>

With Checkbox

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

With Radio Group

<RadioGroup defaultValue="comfortable">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>

Disabled State

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="disabled-input" className="opacity-70 cursor-not-allowed">
    Disabled Field
  </Label>
  <Input type="text" id="disabled-input" placeholder="Disabled" disabled />
</div>

With Helper Text

<div className="grid w-full max-w-sm gap-1.5">
  <Label htmlFor="username">Username</Label>
  <Input type="text" id="username" placeholder="Enter username" />
  <p className="text-sm text-theme-content-muted">
    This is your public display name.
  </p>
</div>

Custom Styling

<div className="space-y-4">
  <div className="grid w-full max-w-sm items-center gap-1.5">
    <Label htmlFor="styled-1" className="text-lg font-bold text-primary">
      Primary Label
    </Label>
    <Input type="text" id="styled-1" placeholder="Enter text" />
  </div>
  <div className="grid w-full max-w-sm items-center gap-1.5">
    <Label htmlFor="styled-2" className="text-sm italic text-theme-content-muted">
      Subtle Label
    </Label>
    <Input type="text" id="styled-2" placeholder="Enter text" />
  </div>
</div>

Props

| Prop | Type | Default | Description | |-----------|-------------------|---------|------------------------------------------------| | htmlFor | string | - | Associates the label with a form control | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Label content |

The Label component also accepts all standard HTML label attributes and forwards them to the underlying element.

Accessibility

• Uses semantic <label> element
• Properly associates with form controls via htmlFor prop
• Includes proper cursor and opacity styles for disabled states
• Screen reader accessible
• Keyboard navigation support through form controls

Styling

The Label component includes these default styles:

• text-sm font-medium leading-none - Base typography
• peer-disabled:cursor-not-allowed peer-disabled:opacity-70 - Disabled state handling

You can customize the appearance by:

• Passing additional classes via the className prop
• Using Tailwind CSS utility classes
• Applying DarkSnow UI theme tokens

Best Practices

1. Always use htmlFor: Associate labels with their corresponding form controls
2. Clear text: Use descriptive and concise label text
3. Required indicators: Use visual indicators (like asterisks) for required fields
4. Consistent styling: Maintain consistent label styling across your application
5. Helper text: Provide additional context when needed without cluttering the label

Related Components

• Input - Form input controls
• Textarea - Multi-line text input
• Checkbox - Checkbox controls
• Radio Group - Radio button groups
• Form - Complete form handling