Label

Label

Markdown

A styled native label for associating text with a form control in a custom layout.

Use Label when a control sits outside the Field composition. Use FieldLabel when the control also needs a description, validation, or an error message.

Input label

Installation

$npx shadcn@latest add @patchui/label

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/label.tsx.

Usage

<div className="flex flex-col gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" />
</div>

Match Label htmlFor to the control’s id. The component accepts native label attributes and supports render when another semantic element is intentionally required.

Accessibility

  • Every editable control needs a visible label. A placeholder is not a label.
  • Keep htmlFor and id values unique within the page.
  • Clicking a correctly associated Label moves focus to or activates its native labelable control.
  • Do not render Label as a span when the text is responsible for naming a form control.
  • Use the control component’s supported labeling pattern for button-based widgets such as Switch, Checkbox, and Radio.