Components/Input

Input

A fully controlled text input with label, helper text, error state, icon support, and full keyboard accessibility. Use with SmartForm for automatic Zod validation.

import { Input } from "@animui/ui"

States

Default, with icons, error, and disabled states.

Email address

Password

With error

This field is required.

Disabled

Props

Prop	Type	Default	Description
`label`	`string`	—	Label rendered above the input.
`placeholder`	`string`	—	Placeholder text shown when the input is empty.
`type`	`string`	`"text"`	HTML input type (text, email, password, number, etc.).
`value`	`string`	—	Controlled value.
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—	Change handler.
`error`	`string`	—	Error message shown below the input with red styling.
`hint`	`string`	—	Helper text shown below the input in neutral styling.
`disabled`	`boolean`	`false`	Disables the input.
`icon`	`React.ReactNode`	—	Icon rendered inside the input on the left.
`rightIcon`	`React.ReactNode`	—	Icon rendered inside the input on the right.
`className`	`string`	—	Additional classes on the outer wrapper.