Label

Accessible label for form controls.

stable

Preview

Display name

Code

tsx

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

export function Example() {
  return (
    <div className="space-y-1.5">
      <Label htmlFor="name">Display name</Label>
      <Input id="name" placeholder="Jane Doe" />
    </div>
  );
}

Props

Prop	Type	Default	Description
htmlFor	`string`	—	The `id` of the form control this label is associated with.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Standard HTML `<label>`. Always associate with a control via `htmlFor`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/label.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type LabelHTMLAttributes, forwardRef } from "react";

export const Label = forwardRef<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>(
  ({ className, ...props }, ref) => (
    // Primitive: htmlFor is supplied by consumers. The lint rule fires because
    // the bare label has no control association at the source — by design.
    // biome-ignore lint/a11y/noLabelWithoutControl: consumer supplies htmlFor
    <label
      ref={ref}
      className={cn(
        "text-sm font-medium leading-tight text-fg",
        // Base UI controls expose disabled via data-disabled (the peer is a
        // span/div, not a native :disabled control), so target both.
        "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
        "peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-70",
        className,
      )}
      {...props}
    />
  ),
);
Label.displayName = "Label";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmLabel (extends Label). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmLabel;

PrizmLabel()
PrizmLabel(String text)

Prop	Type	Default	Description
labelFor	`ObjectProperty<Node>`	—	Associates the label with a control (focus / mnemonic), inherited from Label.

Thin subclass of Label carrying the prizm-label style class (medium weight). Mirrors components/ui/label.tsx.