Input

free

Input provides consistent text entry for forms, search, and editable notes.

import { PiMagnifyingGlass } from 'react-icons/pi'
import Input from '@/components/ui/input';

export default function UsageDemo() {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Input

pnpm dlx nateui@latest add Input

yarn dlx nateui@latest add Input

Examples

Basic

import Input from '@/components/ui/input';

export default function BasicDemo() {
  return (

Size

import Input from '@/components/ui/input';

export default function SizeDemo() {
  return (

Disabled

import Input from '@/components/ui/input';

export default function DisabledDemo() {
  return (

Affix

import { PiMagnifyingGlass, PiQuestion } from 'react-icons/pi'
import Input from '@/components/ui/input';
import Tooltip from '@/components/ui/tooltip';

Password Visibility

import { useState } from 'react';
import { PiEye, PiEyeSlash } from 'react-icons/pi'
import Input from '@/components/ui/input';

Textarea

import Input from '@/components/ui/input';

export default function TextareaDemo() {
  return (

Invalid

import { useState } from 'react';
import { PiWarningCircle } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Form from '@/components/ui/form';

Controlled

Current value: northwind-sales

import { useState } from 'react';
import Input from '@/components/ui/input';
import type { ChangeEvent } from 'react';

API

Input renders either a native input, a textarea, or an affixed input wrapped by InputWrapper.

Input

Input accepts the props below plus native input and textarea props, except the native size and prefix attributes.

Prop	Description	Type	Default
`className`	Class names applied to the input root, or to `InputWrapper` when `prefix` or `suffix` is present.	`string`	-
`defaultValue`	Initial value for uncontrolled usage.	`string \| number \| readonly string[]`	-
`disabled`	Prevents editing and applies disabled control styling.	`boolean`	-
`invalid`	Applies invalid styling; also inherits invalid state from `Form.Field`.	`boolean`	-
`onChange`	Called when the input value changes.	`InputChangeHandler`	-
`placeholder`	Placeholder text rendered by the native input or textarea.	`string`	-
`prefix`	Content rendered before the editable value inside an affixed input.	`InputAffix`	-
`readOnly`	Prevents editing while keeping the field focusable.	`boolean`	-
`ref`	Ref forwarded to the rendered input or textarea element.	`InputRef`	-
`rows`	Number of visible text rows when `textArea` is true.	`number`	-
`size`	Control size.	`ControlSize`	`'md'`
`suffix`	Content rendered after the editable value inside an affixed input.	`InputAffix`	-
`textArea`	Renders a `textarea` instead of an `input`.	`boolean`	`false`
`type`	Native input type when `textArea` is false.	`HTMLInputTypeAttribute`	`'text'`
`value`	Controlled value. `undefined` and `null` are normalized to an empty string.	`string \| number \| readonly string[]`	-
`...nativeInputProps`	Native props for the rendered input or textarea, except `size` and `prefix`.	`NativeInputProps`	-

InputWrapper

InputWrapper is the affix container used by Input when prefix or suffix is provided.

Prop	Description	Type	Default
`children`	Editable control rendered between the affix slots.	`ReactNode`	-
`className`	Class names applied to the wrapper root.	`string`	-
`disabled`	Applies disabled wrapper and affix styling.	`boolean`	-
`invalid`	Applies invalid wrapper and affix styling; also inherits invalid state from `Form.Field`.	`boolean`	-
`prefix`	Content rendered before `children`.	`ReactNode`	-
`readOnly`	Removes focus ring styling when the wrapped control is read-only.	`boolean`	-
`ref`	Ref forwarded to the wrapper span.	`Ref<HTMLSpanElement>`	-
`size`	Control size.	`ControlSize`	`'md'`
`suffix`	Content rendered after `children`.	`ReactNode`	-
`...nativeSpanProps`	Native props applied to the wrapper span, except `prefix`.	`NativeInputWrapperProps`	-

Types

type ControlSize = 'sm' | 'md' | 'lg';
type InputAffix = string | ReactNode;
type InputChangeHandler = ChangeEventHandler<
  HTMLInputElement | HTMLTextAreaElement
>;
type InputRef = Ref<ElementType | HTMLInputElement | HTMLTextAreaElement>;
type NativeInputProps = Omit<
  InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
  'size' | 'prefix'
>;
type NativeInputWrapperProps = Omit<ComponentProps<'span'>, 'prefix'>;