Label

Label renders an HTML <label> element with built-in support for htmlFor association. It prevents text selection on double-click (except when clicking form controls inside the label) and handles mouse interaction gracefully.

Usage

import { Label } from '@loke/ui/label';

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

Props

Examples

Accessibility

• Labels must have an htmlFor attribute matching the associated control's id.
• Clicking a label focuses the associated control.
• Screen readers announce the label text when the control receives focus.
• For unlabeled controls, use aria-label or aria-labelledby instead.

Best practices

• Always associate labels with form controls using htmlFor.
• Keep label text concise and descriptive.
• Avoid nested form controls inside labels; use separate elements instead.
• Use Label consistently for all form fields to improve accessibility.