Forms

Label

An accessible form label with peer-disabled styling.

StableUsed in Aback Tools, Aback LaunchRegistry JSON

Project name

I agree to the terms of service

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add label

Writes components/ui/label.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Label. Native element props pass through.

Prop	Type	Default	Description
`htmlFor`	`string`	None	The control id. Required unless the control is nested inside the label.
`className`	`string`	None	For example font-normal when the label is a checkbox row.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Renders a native label. Clicking it focuses or toggles the associated control.
Do not use a label as a heading. Use a real heading for structure.
Peer-disabled styling applies when the control is disabled, but the label remains readable.
Keep labels visible; do not replace them with placeholder text.

The Aback products whose interfaces shaped this component.