Component

Input

Inputs stay lightweight and accessible while inheriting semantic focus, border, and placeholder behavior from the theme layer.

Preview

Use your work address.

Username

This username is taken.

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add input

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Field, FieldControl, FieldDescription, FieldLabel, Input } from '@nimjs/ui';

export function Example() {
  return <Field description><FieldLabel>Email</FieldLabel><FieldControl><Input type="email" /></FieldControl><FieldDescription>Use your work address.</FieldDescription></Field>;
}

System metadata

Registry

input

Category: forms

Status: preview

Version marker: 0.0.0 (unreleased)

Files

input.tsx

Tokens

backgroundforegroundinputmuted-foregroundradiusring

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

contrast awarefocus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

root

Native input element that owns value, disabled, placeholder, and focus-visible states.

Usage patterns

single-line field

Use for short text, email, search, and numeric values that fit on one line.

composed form control

Pair with an explicit label, description, and error message in consuming form code.

Guidance

Pair Input with a visible label or compose it inside Field for description and error IDs. Use invalid for visual error styling and native required or disabled for form behavior.