Label

The Label component provides accessible labels for form inputs. It's designed to work seamlessly with other form components and handles click interactions properly.

Always use the htmlFor prop to associate labels with their corresponding form inputs.

Features

Semantic <label> element
Automatic association with form inputs via htmlFor
Click handling that respects nested interactive elements
Consistent typography with other form components
Peer styling support for disabled states

Usage

import { Label } from '@loke/design-system/label';
import { Input } from '@loke/design-system/input';

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

Tips:

Match the htmlFor prop with the input's id.
Labels support click-to-focus on the associated input.
Use with form validation to show error states.

Props

Prop

Type

All standard HTML label attributes are also supported.

Examples

Basic label

UsernameEmail AddressPassword

<Label>Username</Label>
<Label>Email Address</Label>
<Label>Password</Label>

Label with input

Full Name

Password

<div className="space-y-2">
  <Label htmlFor="name">Full Name</Label>
  <Input id="name" placeholder="John Doe" />
</div>

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Label with checkbox

Accept terms and conditions

Subscribe to newsletter

Receive marketing emails

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

<div className="flex items-center space-x-2">
  <Checkbox id="newsletter" />
  <Label htmlFor="newsletter">
    Subscribe to newsletter
  </Label>
</div>

Label states

Normal Label

Disabled Label

Required Field *

{/* Normal label */}
<div className="space-y-2">
  <Label htmlFor="normal">Normal Label</Label>
  <Input id="normal" placeholder="Normal input" />
</div>

{/* With disabled input - label shows disabled styling */}
<div className="space-y-2">
  <Label htmlFor="disabled">Disabled Label</Label>
  <Input id="disabled" disabled placeholder="Disabled input" />
</div>

Accessibility

Uses semantic <label> element for proper form association.
Click on label focuses the associated input.
Supports screen reader announcements.
Works with form validation error states.
Disabled styling when associated input is disabled (using peer classes).

Best practices

Always associate labels with inputs using htmlFor and id.
Keep label text concise and descriptive.
Place labels above inputs for most form layouts.
Place labels beside checkboxes and radio buttons.
Use required indicators when appropriate.
Consider using FormLabel from the Form component for validation integration.

Label

On this page