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.

Label

Add a label to the Input with the property label

Label Placeholder

With the property labelPlaceholder the placeholder becomes a label with a 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 underlined 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 beginning or at the end of the Input

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

Attribute	Type	Accepted values	Description	Default
value	`string`	`string[]`	number	-	Input value	-
initialValue	`string`	-	Input default value	-
placeholder	`string`	-	The short hint displayed in the input	-
size	`NormalSizes`	NormalSizes	Change input size	`medium`
color	`SimpleColors`	SimpleColors	Change input text, border and label color	`default`
status	`SimpleColors`	SimpleColors	Change input status color	`default`
helperColor	`SimpleColors`	SimpleColors	Change helper text color	`default`
required	`boolean`	`true/false`	Required input prop	`false`
readOnly	`boolean`	`true/false`	It prevents the user from changing the value of the field	`false`
disabled	`boolean`	`true/false`	Disable input	`false`
clearable	`boolean`	`true/false`	Show clear button	`false`
rounded	`boolean`	`true/false`	Rounded input	`false`
bordered	`boolean`	`true/false`	Bordered input	`false`
underlined	`boolean`	`true/false`	Underlined input	`false`
shadow	`boolean`	`true/false`	Enable or disable the input shadow	`true`
animated	`boolean`	`true/false`	Enable or disable the input animation	`true`
autoComplete	`string`	-	HTML input autocomplete attribute	`off`
borderWeight	`NormalWeights`	NormalWeights	Border weight for `bordered` input	`normal`
fullWidth	`boolean`	-	If `true`, the input will take up the full width of its container.	`false`
width	`string`	-	Input width	`initial`
label	`string`	-	Text label for input	-
labelPlaceholder	`string`	-	The placeholder becomes a label	-
labelLeft	`string`	-	Text label at left of the input	-
labelRight	`string`	-	Text label at right of the input	-
helperText	`string`	-	Add a helper text to Input	-
contentLeft	`React.ReactNode`	-	Left content for input	-
contentRight	`React.ReactNode`	-	Right content for input	-
contentClickable	`boolean`	`true/false`	Left/right content are clickable (just applied when the styling prop is true, see the next props)	`false`
contentLeftStyling	`boolean`	`true/false`	Allows the Input component to wrap the `contentLeft` in a container	`true`
contentRightStyling	`boolean`	`true/false`	Allows the Input component to wrap the `contentRight` in a container	`true`
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) => void`	ContentPosition	click icon event	-
onClearClick	`(e: React.MouseEvent) => void`	-	clear icon event	-
ref	`Ref<HTMLInputElement \| null>`	-	forwardRef	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`input`
...	`InputHTMLAttributes`	`'alt', 'type', 'className', ...`	Input native props	-

Input.Password props

Attribute	Type	Accepted values	Description	Default
hideToggle	`boolean`	-	Hide toggle icon	`false`
visibleIcon	`React.ReactNode`	-	Custom visible password icon	-
hiddenIcon	`React.ReactNode`	-	Custom hidden password icon	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`input`
...	`Input Props`	Input Props	Input 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;
  };
};

Badge Textarea

Created by Junior Garcia

Deployed on

Documentation