Label

A caption for a form control — input, checkbox, radio, switch, select. Renders a native <label>. Pair every form control with a Label so the control has an accessible name, clicks on the label focus the control, and screen readers announce the field correctly.

When to use

• Every visible form control. Always.
• Above or beside an input to describe it ("Email", "API key").
• Wrapping a checkbox or radio next to its descriptive text.

When not to use

• For static UI text that isn't labeling a control, use a heading or plain <p>/<span>.
• As a substitute for aria-label on non-<input> widgets that don't support <label for> association.

Two ways to associate

Either wrap the control inside the <Label> (implicit association — simplest) or set htmlFor to the control's id (explicit — required when the control isn't a child).

For the explicit form, React's useId() is the easiest way to generate a unique, SSR-stable id without hand-managing strings:

1import { useId } from "react";2 3function EmailField() {⋯4	const id = useId();5	return (6		<div className="flex flex-col gap-1.5">⋯7			<Label htmlFor={id}>Email</Label>8			<Input id={id} type="email" />9		</div>10	);11}

When you're using TanStack Form, field.name is already a stable, unique string for each field: pass it as both htmlFor on the Label and id on the input. You get a guaranteed-correct association for free without calling useId() separately:

1import { Input } from "@ngrok/mantle/input";2import { Label } from "@ngrok/mantle/label";3import { useForm } from "@tanstack/react-form";4 5function Example() {⋯6	const form = useForm({⋯7		defaultValues: { email: "" },8		onSubmit: () => {},9	});10 11	return (12		<form>⋯13			<form.Field name="email">⋯14				{(field) => (15					<div className="flex flex-col gap-1.5">⋯16						<Label htmlFor={field.name}>Email</Label>17						<Input⋯18							id={field.name}19							name={field.name}20							type="email"21							value={field.state.value}22							onBlur={field.handleBlur}23							onChange={(event) => field.handleChange(event.target.value)}24						/>25					</div>26				)}27			</form.Field>28		</form>29	);30}

Font weight

A Label automatically gets font-medium when it doesn't contain a nested form control (<input>, <textarea>, <select>, <button>, or [contenteditable]). The default is detected via :has() and applied through a :where()-wrapped variant so its specificity is 0; any font-weight utility you pass on the Label itself overrides cleanly:

1<div className="flex flex-col gap-1.5">2	<Label htmlFor="email">Email</Label>          {/* → font-medium */}3	<Input id="email" type="email" />4</div>5 6<div className="flex flex-col gap-1.5">7	<Label htmlFor="email" className="font-bold">Email</Label>  {/* → font-bold */}8	<Input id="email" type="email" />9</div>

When the Label wraps a control, the auto-default is skipped on purpose: otherwise the control's own typography would inherit the medium weight from the label. In that case, apply font-medium to your own caption element (a <span> or <p>) inside the label:

1<Label htmlFor="email" className="flex flex-col gap-1.5">⋯2	<span className="font-medium">Email</span>3	<Input id="email" type="email" />4</Label>

Disabled state

Pass disabled to render the label in a disabled style. Typically you'll want this to mirror the underlying control's disabled state so the visual treatment stays consistent.

1import { Input } from "@ngrok/mantle/input";2import { Label } from "@ngrok/mantle/label";3 4<div className="flex flex-col gap-1.5">5	<Label htmlFor="name" disabled>Name</Label>6	<Input id="name" type="text" disabled readOnly value="foo" />7</div>8 9<div className="flex items-center gap-2">10	<Label htmlFor="name" disabled>Name:</Label>11	<Input id="name" type="text" disabled readOnly value="foo" />12</div>

API Reference

The Label accepts the following props in addition to the standard HTML label attributes.