Labels

Label is the caption you put above or beside a form control. Built on Radix, it ties to an input through htmlFor so clicking the label focuses the field, and it dims automatically when its associated control is disabled. Use it for every input that needs a visible name.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: label.tsx

import { Label, Input } from "@beacon/design-system";

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>;

Props

Prop	Type	Default	Description
htmlFor	string	—	The id of the control this label names. Enables click-to-focus and screen reader association.
className	string	—	Extra classes for layout or typography overrides.
children	ReactNode	—	The label text.

All other props of the underlying Radix Label.Root are forwarded. The label also responds to a peer-disabled sibling input by reducing its opacity.

When to use

• Naming any text input, select, checkbox, or radio so users and assistive tech know what the field is.
• Pairing with the field controls so clicking the caption focuses the input.
• Building consistent, accessible forms across Tower and its modules.

Do not use Label as a general-purpose text element; for body or heading text use the semantic .text-* role classes generated from helm.tokens.json.