Label
Renders an accessible label associated with controls.
Overview
Use Label to name a form control.
Labels help every user understand what a control does. They are also required for good screen-reader and click-target behavior.
Anatomy
A label is connected to a control. The visible text should be short, specific, and stable.
Usage guidance
Use Field when you need a label plus description or validation. Use Label directly when you only need the label primitive.
Accessibility
Do not replace labels with placeholders. A placeholder disappears when the user types and is not enough context for many users.
Installation
npm
npx love-ui@latest add labelUsage
import { Label } from "@/components/ui/label"<Label htmlFor="email">Email</Label>Examples
The example shows Label connected to a checkbox.
For accessible labelling and validation, prefer using the FieldLabel component. See some related examples.