Field
Fields compose labels, controls, descriptions, and validation messages.
Overview and decision boundary
Use Field to compose a label, description, control, and message into one accessible form unit.
Do not scatter messages away from the control they describe.
Preview
Names appear in navigation, tables, and activity.
Use a clear internal name.
Use at least 3 characters.
import { Field, Input } from '@nerio-ui/ui';<Field label="Project name" description="Shown in workspace navigation." message="Use at least 3 characters." invalid><Input /></Field>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add fieldimport { Field, Input } from '@nerio-ui/ui';Usage
import { Field, Input } from '@nerio-ui/ui';<Field label="Project name" description="Shown in workspace navigation." message="Use at least 3 characters." invalid><Input /></Field>Variants
| Variant | Purpose |
|---|---|
default | Default variant using semantic Nerio tokens. |
invalid | Invalid is part of the public component contract. |
Anatomy
| Slot | Purpose |
|---|---|
root | Field container that controls spacing and state. |
label | Accessible name for the control. |
description | Optional helper text before interaction. |
message | Validation or help text after interaction. |
States
| State | Purpose |
|---|---|
Neutral | Description and message can provide helper text. |
Invalid | Message explains how to recover. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Generates stable ids for label, description, and message relationships.
- Clones a single React control child to wire id and aria-describedby, and only sets invalid state for invalid fields.
- Preserves a child control id when supplied and merges existing aria-describedby values.
- Uses role="alert" for message text only when invalid is true.
- Supports one form control child; compose custom markup directly when a field needs multiple controls.
- Keep helper text and error text close to the field.
API
| Prop | Purpose |
|---|---|
className | Extends the component root while preserving Nerio tokenized defaults. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | field installs 5 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | label, form-message |
Package dependencies | 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 Field to compose a label, description, control, and message into one accessible form unit.
Do / do not
Do
Use Field as the default wrapper for production form rows.
Do not
Do not scatter messages away from the control they describe.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-field-gap | Public customization point for this component contract. |
--n-color-text-secondary | Public customization point for this component contract. |
--n-color-text-tertiary | Public customization point for this component contract. |
--n-color-status-danger | Public customization point for this component contract. |