Label
Labels name form controls. Keep required and supplementary hint context compact and beside the visible label.
Overview and decision boundary
Use Label to provide an accessible name for a form control.
Do not rely on placeholders or icons alone.
import { Input, Label, LabelContent, LabelRequired, LabelRow,} from "@nerio-ui/ui";import { LabelHint } from "@nerio-ui/ui/client";<LabelRow> <LabelContent> <Label htmlFor="project-name">Project name</Label> <LabelRequired /> <LabelHint label="Choose a recognizable name for collaborators." /> </LabelContent></LabelRow><Input id="project-name" required />Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm exec nerio add labelimport { Input, Label, LabelContent, LabelRequired, LabelRow } from '@nerio-ui/ui';import { LabelHint } from '@nerio-ui/ui/client';Usage
import { Input, Label, LabelContent, LabelRequired, LabelRow } from '@nerio-ui/ui';import { LabelHint } from '@nerio-ui/ui/client';<LabelRow> <LabelContent> <Label htmlFor="project-name">Project name</Label> <LabelRequired /> <LabelHint label="Choose a recognizable name for collaborators." /> </LabelContent></LabelRow><Input id="project-name" required />Variants
| Composition | Use |
|---|---|
Default | A visible native Label paired with one control. |
Required | Add LabelRequired and the control's native required attribute. |
With hint | Use LabelRow and LabelContent to keep supplementary guidance beside the label. |
Anatomy
| Slot | Purpose |
|---|---|
root | Native <label> associated with a control through htmlFor. |
content | Left-side group for the label text, required marker, and hint. |
required | Red visual asterisk that never replaces native required semantics. |
hint | Question-mark tooltip trigger for non-essential context beside the label. |
States
| State | Behavior |
|---|---|
Default | The visible Label gives the control its accessible name. |
Required | LabelRequired adds a visual marker while the control uses native required. |
Hint | LabelHint reveals supplementary guidance on hover, focus, or activation. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Use htmlFor to associate the label with a control id.
- Forwards refs and native label attributes.
- Keep labels visible for reusable product forms.
- Avoid relying on placeholder text as the only label.
- Use LabelRow and LabelContent so the interactive hint is not nested inside the native label.
- LabelHint uses a native type=button trigger so it remains keyboard discoverable without submitting the surrounding form.
- Pair LabelRequired with a native required control.
- Tooltip guidance is supplementary and must not carry essential requirements.
Review the shared responsibility and evidence boundaries in the Accessibility foundation alongside this component-specific contract. Use the Spacing & layout foundation for shared density, wrapping, overflow, reflow, and component-versus-product ownership guidance. The Color foundation, Typography foundation, and Localization foundation define the shared visual-role, text-resilience, direction, and locale boundaries used by component examples.
API
| Part | Props | Purpose |
|---|---|---|
Label | LabelHTMLAttributes | Native label that supplies the accessible control name. |
LabelRow | HTMLAttributes | Keeps label text and a supplementary hint as separate semantic siblings. |
LabelContent | HTMLAttributes | Groups the native label, required marker, and hint. |
LabelRequired | HTMLAttributes | Visual red asterisk; pair with the control's required attribute. |
LabelHint | label + ariaLabel? | Small client-only question icon with a supplementary tooltip. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | label installs Tailwind-first Label, composition helpers, LabelHint, and the token bridge. |
Base UI | Tooltip for LabelHint only. |
Registry dependencies | tooltip |
Package dependencies | @nerio-ui/adapters, clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Label to provide an accessible name for a form control.
Do / do not
Do
Keep the label visible and use a short LabelHint only for supplementary context.
Do not
Do not put a button or link inside the native Label, or use a lock icon without a matching control state.
Related components
Tokens
| Group | Tokens | Controls |
|---|---|---|
Typography | --n-label-font-size / --n-label-font-weight | Label text hierarchy. |
Layout | --n-label-gap | Rhythm between label text, required marker, and hint. |
Required | --n-label-required-color | Required marker color. |
Context | --n-label-hint-icon-size / --n-label-icon-color | Hint icon treatment. |
Focus | --n-focus-ring | Visible keyboard focus for the hint. |