Input
Input is a thin native control for text-like, numeric, and platform temporal values; Field owns labels, descriptions, and validation messages.
Overview and decision boundary
Use Input for native text-like, numeric, or temporal values when browser-owned entry and form behavior fit the product.
Do not use placeholder text as the only label.
A label and description remain outside the native Input.
import { Field, Input } from "@nerio-ui/ui";<Field label="Project name" description="A label and description remain outside the native Input."> <Input id="project-name" placeholder="Launch materials" autoComplete="organization" required /></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 exec nerio add inputimport { Field, Input } from '@nerio-ui/ui';Usage
import { Field, Input } from '@nerio-ui/ui';<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. |
Text-like types | Text, email, password, search, tel, url, and number preserve native semantics. |
Temporal types | Date, month, week, time, and datetime-local preserve browser pickers, localized chrome, and native values. |
Anatomy
| Slot | Purpose |
|---|---|
input | Input slot exposed through data-slot="input". |
States
| State | Behavior |
|---|---|
Default | Accepts supported 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, readOnly, min, max, step, autocomplete, and aria-describedby.
- Temporal types preserve browser-owned pickers, localized chrome, native values, validity, and form submission.
- Use the forwarded input ref for valueAsDate where supported and valueAsNumber; datetime-local does not have a standard valueAsDate representation.
- 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, number, date, month, week, time, and datetime-local.
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
| Prop | Values | Purpose |
|---|---|---|
size | sm | md | lg | Selects the density-aware control height. |
htmlSize | number | Forwards the native input size attribute where applicable. |
type | Supported native type | Preserves native keyboard and form semantics. |
min / max / step | Native values | Forwards temporal and numeric constraints unchanged. |
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 7 source files. |
Base UI | No interactive primitive required. |
Temporal behavior | Native browser and operating-system control. |
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.
- Use native temporal types for platform entry; use Calendar or DatePicker only when their bounded custom UI is required.
- Prefer Field when the control needs label, description, or validation message.
Do / do not
Do
Use autocomplete and inputMode intentionally, and compose labels and messages outside the native Input. Prefer temporal types when browser-owned entry, picker, validation, and direct form submission are the right product path.
Do not
Parse localized temporal display strings, suppress native picker affordances, or turn Input into Calendar, DatePicker, scheduling, or timezone workflow behavior.
Related components
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. |