Label

Composition preview

Try Label alongside its related fields & validation components. These examples keep all actions local.

Usage

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

<>
<Label htmlFor="reviewed">Reviewed</Label>
<Checkbox id="reviewed" />
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

htmlFor, asChild, native label attributes; unstyled composition

Usage & accessibility

A placeholder alone is not a label. Prefer FieldLabel inside Field.

Implementation contract

src/components/ui/label.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.