Input

Input is a thin native control for short text-like values; Field owns labels, descriptions, and validation messages.

Overview and decision boundary

Use Input for short text values such as names, filters, URLs, and settings.

Do not use placeholder text as the only label.

Project name

A label and description remain outside the native Input.

1import { Input, Label } from "@nerio-ui/ui";23<Label htmlFor="project-name">Project name</Label>4<Input id="project-name" placeholder="Launch materials" autoComplete="organization" required />

Installation and imports

Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.

1pnpm dlx nerio add input23import { Field, Input } from '@nerio-ui/ui';

Usage

1import { Field, Input } from '@nerio-ui/ui';23<Field label="Project name" description="Use a short recognizable name."><Input placeholder="Launch materials" required autoComplete="organization" /></Field>

Variants

Variant	Purpose
`sm / md / lg`	Shared density-aware control sizes; md is the default.
`Native types`	Text, email, password, search, tel, url, and number semantics.

Anatomy

Slot	Purpose
`input`	Input slot exposed through data-slot="input".

States

Workspace slug

Use lowercase letters, numbers, and hyphens.

State	Behavior
`Default`	Accepts editable text-like values through native input behavior.
`Invalid`	Exposes aria-invalid and the danger border token without owning validation.
`Read-only`	Keeps the value focusable and selectable without accepting edits.
`Disabled`	Removes the control from interaction and applies disabled tokens.

Motion

Hover transitions the border color through shared motion tokens.
Focus-visible animates the ring and border only.
Reduced motion keeps the state change but removes nonessential timing.

Accessibility

Use with Label or Field so the control has an accessible name.
Supports native input attributes including required, disabled, autocomplete, and aria-describedby.
Invalid state normalizes to aria-invalid=true only for true validation errors.
Disabled state uses the native disabled attribute; read-only stays focusable and selectable.
Supported types are text, email, password, search, tel, url, and number.

API

Prop	Values	Purpose
`size`	`sm \| md \| lg`	Selects the density-aware control height.
`htmlSize`	`number`	Forwards the native input size attribute.
`type`	`Supported native type`	Preserves native keyboard and form semantics.
`invalid`	`boolean`	Exposes the invalid state for Field and FormMessage composition.
`className`	`string`	Extends the root without replacing component tokens.

Implementation contract

Contract	Value
`Registry item`	input installs 6 source files.
`Base UI`	No interactive primitive required.
`Registry dependencies`	None.
`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 Input for short values; use Textarea for longer notes.
Prefer Field when the control needs label, description, or validation message.

Do / do not

Use autocomplete and inputMode intentionally, and compose labels and messages outside the native Input.

Add prefix, suffix, search results, or validation behavior directly to Input; use InputGroup or a dedicated control.

Tokens

Token	Group	Controls
`--n-input-height-sm`	Sizing	Small control height.
`--n-input-height-md`	Sizing	Default control height.
`--n-input-height-lg`	Sizing	Large control height.
`--n-input-radius`	Shape	Control corner radius.
`--n-input-background`	Surface	Default control surface.
`--n-input-foreground`	Surface	Default input text.
`--n-input-border`	Border	Default border.
`--n-input-border-hover`	Border	Hover border.
`--n-input-border-focus`	Border	Focused border.
`--n-input-border-danger`	Invalid	Invalid border treatment.
`--n-motion-focus-duration`	Focus	Focus transition duration.
`--n-focus-ring`	Focus	Visible focus treatment.