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 '@nim-ui/ui';

export function Example() {
  return <Input placeholder="team@nim-ui.dev" type="email" />;
}

System metadata

Registry

input

Category: forms

Tokens

backgroundforegroundinputmuted-foregroundradiusring

Dependencies

utilstokens

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.