Input

Input component for collecting user text input with support for multiple variants, sizes, icons, and validation states.

import { Input } from "@ninna-ui/forms"

pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

Usage

Import and use the Input component in your application.

import { Input } from "@ninna-ui/forms";

export default function Example() {
  return (
    <Input placeholder="Enter your name" />
  );
}

Basic input with placeholder.

Input supports outline, filled, flushed, and unstyled variants.

Input comes in 5 sizes: xs, sm, md, lg, and xl.

Input supports multiple color themes for focus states.

Input with left and right icons.

Input with a clear button that appears when there's a value.

Input with character count display when maxLength is set.

0/50

36/100

Input with a floating label that animates on focus.

Email Address

Password

Username

Input in read-only mode.

Control whether input takes full container width.

Full width (default)

Auto width

Input in different states: normal, disabled, read-only, and invalid.

Input works seamlessly with React Hook Form using the register() pattern. Wrap with Field for labels and error messages.

Complete list of props for the Input component.

Prop	Type	Default	Description
`variant`	`'outline' \| 'filled' \| 'flushed' \| 'unstyled'`	`'outline'`	Visual style variant of the input
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the input focus state
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the input
`clearable`	`boolean`	`false`	Show clear button when input has value
`onClear`	`() => void`	-	Callback when clear button is clicked
`showCounter`	`boolean`	`false`	Show character counter (requires maxLength)
`maxLength`	`number`	-	Maximum character length
`floatingLabel`	`string`	-	Floating label text
`fullWidth`	`boolean`	`true`	Whether the input takes full width of its container
`invalid`	`boolean`	`false`	Whether the input is in an invalid state
`disabled`	`boolean`	`false`	Whether the input is disabled
`readOnly`	`boolean`	`false`	Whether the input is read-only
`className`	`string`	-	Additional CSS classes