Input

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

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

Default

The default Input contains an animation effect.

Disabled

Unusable and un-writtable Input.

Clearable

Add a clear button in the Input box.

Label

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.

Password

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

Sizes

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

Bordered

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

Underlined

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

Rounded

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

Status

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}.

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

Content

You can put any content at the begining or at the end of the Input with the properties contentLeft and contentRight. Important: 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 .

No Animated

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

Input Types

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

APIs

Input Props

AttributeTypeAccepted valuesDescriptionDefault
valuestringstring[]number-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-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsinput
...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-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsinput
...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';

useInput

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