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 labelRequired field
Label with required indicator
tsx
<Label htmlFor="email">
Email <span className="text-destructive">*</span>
</Label>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
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