Label

A label names a form control, so users know what to enter or what an option does. It refers to the control through htmlFor or wraps it, and a click on the label then focuses the input or toggles the option. The label dims when an element around it carries the group class and data-disabled="true", and when a disabled native control with the peer class precedes it in the same parent. Checkbox carries that class but renders a span, so the Disabled Control example renders it as a button.

UsageCopy Anchor Link

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

export function LabelDefault() {
	return (
		<div className="grid w-full max-w-sm gap-2">
			<Label htmlFor="item-number">Item number</Label>
			<Input id="item-number"/>
		</div>
	);
}

ExamplesCopy Anchor Link

Nested ControlCopy Anchor Link

Checkboxes and similar options often carry a short caption of their own. Wrapped around such a control, the label needs neither htmlFor nor an id, and a click on the caption toggles the option, so users get a larger target than the control alone offers.

Disabled GroupCopy Anchor Link

Part of a form can be unavailable as a whole, for example while a stock count is in progress. In that case the surrounding element carries the group class and data-disabled set to true, and the label takes on the disabled state like its control. It then no longer responds to clicks, so users see at once that the field accepts no input.

Disabled ControlCopy Anchor Link

Sometimes a single option is unavailable while the rest of the form stays open, such as a setting that only a store manager may change. A disabled control that precedes the label in the same parent passes that state on to the label. Users recognize the option as unavailable, and a click on the label, which still refers to the control through htmlFor, changes nothing.

API ReferenceCopy Anchor Link