Component

Input

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

Preview

Inputs inherit semantic focus styles from the theme layer.

Usage

Input example ยท tsx
import { Input } from '@nimjs/ui';

export function Example() {
  return <Input placeholder="team@example.com" type="email" />;
}

System metadata

Registry

input

Category: forms

Status: stable

Since: 0.0.0

Files

input.tsx

Tokens

backgroundforegroundinputmuted-foregroundradiusring

Dependencies

utilstokens

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

Prefer pairing inputs with explicit labels in app code. The component intentionally avoids wrapping field abstractions so teams can compose their preferred form patterns without fighting the base library.