Hex UIv1

Label

An accessible label component built on Radix UI Label primitive. Associates with form controls via htmlFor.

Installation

pnpm
pnpm dlx @hex-core/cli add label

Required field

Label with required indicator

tsx
<Label htmlFor="email">
  Email <span className="text-destructive">*</span>
</Label>

Required field with Input

Full required-field pattern: a visual asterisk that screen readers skip (aria-hidden) paired with aria-required on the input so assistive tech announces the required state semantically.

tsx
<div className="grid gap-1.5">
  <Label htmlFor="workspace-name">
    Workspace name{" "}
    <span aria-hidden="true" className="text-destructive">*</span>
  </Label>
  <Input
    id="workspace-name"
    name="workspaceName"
    aria-required="true"
    placeholder="Acme Inc."
  />
  <p className="text-xs text-muted-foreground">Visible to your collaborators.</p>
</div>

API Reference

PropTypeDefaultDescription
htmlFor
string—The id of the form control this label is associated with

AI Guidance

When to use

Use as a label for every form input, select, textarea, checkbox, or radio group. Always use htmlFor to associate with the control's id.

When not to use

Don't use as a standalone text element — use a paragraph or heading instead. Don't use for non-form contexts.

Common mistakes

  • Forgetting to set htmlFor matching the input's id
  • Using Label for non-form text content
  • Nesting interactive elements inside Label

Accessibility

Clicking the label focuses the associated control. Automatically communicates the label to screen readers. Use htmlFor/id pairing, not nesting.

Token budget: 200

Verified against @hex-core/components@1.12.0

Edit this page on GitHub