Label

A visible name for a form control.

Overview

Label renders a native label. It supplies the visible text for a control such as Input or Textarea. The control itself stays a separate component.

Set htmlFor to the control's id. That link gives the control its accessible name. Label does not validate the field, store form state, report errors, or mark a field required.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add label

Usage

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

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

Examples

Input

htmlFor matches the input id. The label text is the accessible name.

Textarea

The same htmlFor and id pairing names a multiline field.

In practice

Each contact field has a visible Label. Name, email, and message share one form.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
htmlForstring—Matches the id of the control this label names.
childrenReactNode—Visible text for the control.
classNamestring—Merged onto the label with cn.

Accessibility

Label is a native label. It does not add an ARIA role.

  • Use htmlFor, and give the control an id with the same value.
  • Prefer a visible label for each form control.
  • Placeholder text is not a replacement for the label.
  • Clicking the label focuses the associated control. That is native browser behavior.