Label

Renders an accessible label associated with controls.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/label.json

Usage

Use labels with form controls via htmlFor matching the control id.

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

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

Disabled styling is driven by group-data-[disabled=true] on an ancestor, or peer-disabled when the control is a peer sibling.