Label

Preview

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/label.json

Usage

Copyimport { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
 
<div className="grid gap-2">
  <Label htmlFor="email">Your email address</Label>
  <Input id="email" type="email" />
</div>;

Match htmlFor to the control's unique id. Clicking the label focuses or activates the associated control. For a disabled control, place it before the label with className="peer" to dim the label automatically.

Label in Field

For fields with descriptions and validation, use Base UI Field and its Field.Label, Field.Description, and Field.Error parts. See the Input field example.

API Reference

Accepts native label attributes and a ref. Preserve label semantics when using render. Text alignment follows the inherited direction, including RTL.