Label

Displays an accessible label for a form control, styled to match SevenUI inputs, checkboxes, and switches, and used inside Field.

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

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

Installation

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/labelpnpm dlx shadcn@latest add @sevenui/labelyarn dlx shadcn@latest add @sevenui/labelbunx --bun shadcn@latest add @sevenui/label

Usage

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

<div>
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" />
</div>;

API reference

Label

Extends the native <label> element. It dims automatically when its control is disabled — both as a sibling after the control (peer-disabled) and with the control nested inside (has-[:disabled]). Prefer the sibling pattern with htmlFor. Base UI ships no Label primitive; inside a Field, use FieldLabel for automatic wiring instead.