When To Use
- Use Label when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
- Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
- Review the examples below to understand the tradeoffs between density, emphasis, and behavior.
When Not To Use
- Do not use Label just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
- Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Composition surface
Label keeps the native HTML or Radix API surface, then layers in design-system styling and composition defaults.
Example Code
import { Label } from "@hilum/ui"
<Label>Full name</Label>
<Label>
Email <span className="text-red-500">*</span>
</Label>
<Label className="text-ground-400">Optional field</Label>Label
Default
Form labels with variations