Label

A high-quality, styled React label component that renders an accessible label element associated with form controls.

The Label component renders an accessible label for form controls with support for sizes and disabled state styling.

Usage

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

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

Preview

Email Address

Anatomy

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

<Label htmlFor="input-id" />;

API Reference

Label Props

Prop	Type	Default	Description
`htmlFor`	`string`	`undefined`	ID of the form control.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant for label.