Label

Labels establish reading order before validation, helper copy, or control chrome begins. In this system they are intentionally quiet: uppercase, compact, and consistent enough to stabilize dense forms without behaving like mini-headlines.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

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

<div className="grid gap-3">
  <Label htmlFor="issue-title">Issue title</Label>
  <Input id="issue-title" />
</div>

Why This Primitive Exists

The label primitive keeps one visual rule for field naming across inputs, checkboxes, textareas, and compact settings rows.

• Use it when a control needs a stable name that remains visible after the user begins editing.
• Keep labels short and structural. Put explanation, warnings, and validation in adjacent helper text.
• Pair it directly with htmlFor when the control has a concrete input id.

Examples

Basic Field Label

The default treatment is designed to stay legible without overpowering the entered value.

Labels With Control States

Labels often need to sit beside selection controls and disabled states. The component inherits Radix label behavior and includes peer-disabled styling so unavailable controls dim together.

<div className="flex items-start gap-3">
  <Checkbox id="include-diff" defaultChecked className="mt-1" />
  <div className="grid gap-1">
    <Label htmlFor="include-diff">Include release diff</Label>
    <p className="text-sm leading-6 text-muted-foreground">
      Send the structural changes alongside the approval note.
    </p>
  </div>
</div>

In Context

On longer editorial or operational forms, the label should keep the row readable while helper copy handles the constraint.

Guidance

Keep The Label Short

• Prefer nouns or short noun phrases such as Owner email, Issue title, or Release note.
• Avoid turning the label into a full instruction sentence.
• If the field needs policy or formatting guidance, place that copy below the control.

Preserve One Naming Rhythm

• Use the same label treatment across all rows in a form or settings panel.
• Do not style one field label like a section heading unless it truly starts a new group.
• For compound layouts, use Field when you need shared spacing, descriptions, and errors as part of the same structure.

Connect It To The Control

• Use htmlFor with the related input id whenever possible.
• Wrap checkboxes or switches carefully so the click target remains obvious.
• Keep supporting text outside the label when the extra copy should not expand the tappable region.

API Reference

Label

Label wraps @radix-ui/react-label and applies the system's compact uppercase field treatment.

Label also accepts the standard Radix label props, including htmlFor, onMouseDown, and other native label attributes.