Label

Preview

Design guidance

Use Label when the caller owns the native control and its associations. Give the control an ID and match it with htmlFor. Required and optional markers are visual cues; set native constraints on the control. For coordinated validation and field state, use Field.

Keep help text and tooltip triggers outside the label. Give persistent help its own ID and connect it with aria-describedby.

Installation

npx shadcn@latest add https://ghost-ui.com/r/label.json

Label uses React and native HTML. These examples also compose the input, button and tooltip registry items.

Basic usage

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

<Label htmlFor="assistant-name">Assistant name</Label>
<input id="assistant-name" />

Structures

Label renders one native label element. Native attributes, htmlFor, className, style and the ref go to that element. Help belongs beside the label and remains caller-owned.

Examples

Subtle field label

Match a subtle Input with variant="subtle". When Label is inside Field.Root, it can inherit that variant. The label stays in the foreground color during an error; the input boundary and caller's error message communicate validation.

Required

Show a marker and apply native required validation to the control.

Optional

Show optional status without changing the control's validity.

Caller-owned feedback

The caller creates the help ID and connects it to the input with aria-describedby.

Tooltip

Keep the focusable help trigger beside the label, outside its native element.

Disabled

Apply the visual state to Label and disable the input itself.

Invalid

Show the caller's invalid state and associate its message with the input.

Wrapping

Let a long label wrap while preserving its native input association.

API reference