Inputs fields are used to get the user input in a text field.

import { Input } from '@nextui-org/react';


The default Input contains an animation effect.


Unusable and un-writtable Input.


Add a clear button in the Input box.


Add a label to the Input with the property label

Label Placeholder

With the property labelPlaceholder the placeholder becomes a label with an great animation.


Input component with a show/hide password functionality, Important: You have to use the Input.Password component.


Change the size of the entire Input including padding, font-size and border with the size property.


You can change the full style towards a bodered Input with the bordered property and you can customize the color with the color prop.


You can change the full style towards an undelined Input like the material effect just adding the underlined prop.


You can completely round the corners of any type of Input with the rounded prop.


You can change the color of the entire Input with the property status.

No Shadow

You can disable the shadow of the entire Input with the property shadow={false}.

No Animated

You can disable the animation of the entire Input with the property animated={false}.

Helper text

You can add a helper text to Input with the prop helperText and customise its color with the helperColor prop. The first example is using the hook useInput

Left/right labels

You can put any content at the begining or at the end of the Input


You can put any content at the begining or at the end of the Input with the properties contentLeft and contentRight. Impotant: If you want the Input component change the icon colors according to the current status color you should use currentColor as the icon/svg color to allows .

Input Types

Change the type of Input with the type property as a native html input, the default value is text


Input Props

AttributeTypeAccepted valuesDescriptionDefault
valuestring-Input value-
initialValuestring-Input default value-
placeholderstring-The short hint displayed in the input-
sizeNormalSizesNormalSizesChange input sizemedium
colorSimpleColorsSimpleColorsChange input text, border and label colordefault
statusSimpleColorsSimpleColorsChange input status colordefault
helperColorSimpleColorsSimpleColorsChange helper text colordefault
requiredbooleantrue/falseRequired input propfalse
readOnlybooleantrue/falseIt prevents the user from changing the value of the fieldfalse
disabledbooleantrue/falseDisable inputfalse
clearablebooleantrue/falseShow clear buttonfalse
roundedbooleantrue/falseRounded inputfalse
borderedbooleantrue/falseBordered inputfalse
underlinedbooleantrue/falseUnderlined inputfalse
shadowbooleantrue/falseEnable or disable the input shadowtrue
animatedbooleantrue/falseEnable or disable the input animationtrue
autoCompletestring-HTML input autocomplete attributeoff
borderWeightNormalWeightsNormalWeightsBorder weight for bordered inputnormal
fullWidthboolean-If true, the input will take up the full width of its container.false
widthstring-Input widthinitial
labelstring-Text label for input-
labelPlaceholderstring-The placeholder becomes a label-
labelLeftstring-Text label at left of the input-
labelRightstring-Text label at right of the input-
helperTextstring-Add a helper text to Input-
contentLeftReact.ReactNode-Left content for input-
contentRightReact.ReactNode-Right content for input-
contentClickablebooleantrue/falseLeft/right content are clickable (just applied when the styling prop is true, see the next props)false
contentLeftStylingbooleantrue/falseAllows the Input component to wrap the contentLeft in a containertrue
contentRightStylingbooleantrue/falseAllows the Input component to wrap the contentRight in a containertrue
onChange(e: React.ChangeEvent<HTMLInputElement>) => void-Callback fired when the value is changed-
onFocus(e: React.FocusEvent<HTMLInputElement>) => void-Callback fired when the input is focused.-
onBlur(e: React.FocusEvent<HTMLInputElement>) => void-Callback fired when the input is blurred.-
onContentClick(key: ContentPosition, e: React.MouseEvent) => voidContentPositionclick icon event-
onClearClick(e: React.MouseEvent) => void-clear icon event-
refRef<HTMLInputElement | null>-forwardRef-
...InputHTMLAttributes'alt', 'type', 'className', ...Input native props-

Input.Password props

AttributeTypeAccepted valuesDescriptionDefault
hideToggleboolean-Hide toggle iconfalse
visibleIconReact.ReactNode-Custom visible password icon-
hiddenIconReact.ReactNode-Custom hidden password icon-
...Input PropsInput PropsInput props-

Input types

Simple Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold';

Content Position

type ContentPosition = 'left' | 'right';


type useInput = (initialValue: string) => {
  value: string;
  setValue: Dispatch<SetStateAction<string>>;
  currentRef: MutableRefObject<string>;
  reset: () => void;
  bindings: {
    value: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;