vert-ui
Browse docs
All components

Label

Form label wired to its control. Clicking it focuses the field, and screen readers announce it with the control's value.

Preview

Live preview

Usage

Examples

Label with a hint

Found in workspace settings.

<div className="space-y-2">
  <Label htmlFor="api-key">API key</Label>
  <Input id="api-key" type="password" />
  <p id="api-key-hint" className="text-xs text-muted-foreground">
    Found in workspace settings.
  </p>
</div>

Required marker

<Label htmlFor="plan">
  Plan <span aria-hidden>*</span>
</Label>

Reference

Props

PropTypeDefaultDescription
htmlForstring—Id of the control this label names — the programmatic association.
childrenReactNode—The visible label text. Keep it short and unique on the page.
classNamestring—Merged last; add gap or color utilities as needed.

Accessibility

Accessibility notes

  • Always pair a Label with htmlFor (or wrap the control) — an unlabelled input has no accessible name.
  • One label points at one control; never reuse the same text on two fields.
  • Decorative asterisks need aria-hidden; put "required" on the input itself, which Input does via the required attribute.
  • Labels are focusable targets: clicking the text moves focus to the control, which helps motor-impaired users.