components

Label

A label is a screen-reader handle as much as a visual cue. Bind to the control with `htmlFor` so click targeting and accessibility tree stay aligned.

With an input

The canonical pairing. The label's `htmlFor` matches the input's `id`.

tsx

<div className="grid gap-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@wolf.co" />
</div>

The same pattern scales to multi-line inputs. The label keeps its 14px medium weight.

Notes

tsx

<Label htmlFor="notes">Notes</Label>
<Textarea id="notes" placeholder="Add context…" />

For binary settings, a horizontal label + switch pairing reads faster. Keep the click target on the switch itself.

Push notifications

tsx

<div className="flex items-center gap-3">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Push notifications</Label>
</div>

When the associated input is disabled the label fades automatically via the `peer` class, provided the label follows the input in the DOM.

API token (disabled)

tsx

<Input id="token" placeholder="sk_live_…" disabled className="peer" />
<Label htmlFor="token">API token</Label>