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.

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

export default function App() {
  return <Input placeholder="Next UI" />;
}

Disabled

Unusable and un-writable Input.

import { Input, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Input disabled placeholder="Disabled" />
      <Spacer y={0.5} />
      <Input readOnly placeholder="Read only" initialValue="readOnly" />
    </>
  );
}

Clearable

Add a clear button in the Input box.

import { Input, Spacer } from "@nextui-org/react";
export default function App() {
  return (
    <>
      <Input clearable bordered labelPlaceholder="Name" initialValue="NextUI" />
      <Spacer y={2.5} />
      <Input
        clearable
        underlined
        labelPlaceholder="Name"
        initialValue="NextUI"
      />
      <Spacer y={1.5} />
      <Input clearable label="Name" placeholder="Name" initialValue="NextUI" />
    </>
  );
}

Label

Add a label to the Input with the property label

import { Input  } from '@nextui-org/react';
    
export default function App() {
  return <Input label="Full Name" placeholder="Guillermo Rauch" />;
}

Label Placeholder

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

import { Input  } from '@nextui-org/react';
    
export default function App() {
  return <Input labelPlaceholder="NextUI" />;
}

Password

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

import { Input, Spacer } from "@nextui-org/react";
import { UnLockIcon } from "./UnLockIcon.js";
import { LockIcon } from "./LockIcon.js";

export default function App() {
  return (
    <>
      <Input.Password labelPlaceholder="Password" initialValue="nextui123" />
      <Spacer y={1.6} />
      <Input.Password
        labelPlaceholder="Custom icons"
        visibleIcon={<UnLockIcon fill="currentColor" />}
        hiddenIcon={<LockIcon fill="currentColor" />}
      />
    </>
  );
}

Sizes

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

import { Input, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Input 
        size="xs" 
        placeholder="Mini" 
      />
      <Spacer y={0.5} />
      <Input 
        size="sm" 
        placeholder="Small" 
      />
      <Spacer y={0.5} />
      <Input 
       size="md" 
       placeholder="Medium" 
      />
      <Spacer y={0.5} />
      <Input 
        size="lg" 
        placeholder="Large" 
      />
      <Spacer y={0.5} />
      <Input 
        size="xl" 
        placeholder="xLarge" 
      />
      <Spacer y={0.5} />
      <Input 
        width="120px" 
        placeholder="120px" 
      />
    </>
  );
}

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.

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input 
          bordered 
          labelPlaceholder="Default" 
          color="default" />
      </Grid>
      <Grid>
        <Input 
          bordered 
          labelPlaceholder="Primary" 
          color="primary" />
      </Grid>
      <Grid>
        <Input 
          bordered 
          labelPlaceholder="Secondary" 
          color="secondary" />
      </Grid>
      <Grid>
        <Input 
          bordered 
          labelPlaceholder="Success" 
          color="success" />
      </Grid>
      <Grid>
        <Input 
          bordered 
          labelPlaceholder="Warning" 
          color="warning" />
      </Grid>
      <Grid>
        <Input 
          bordered 
          labelPlaceholder="Error" 
          color="error" />
      </Grid>
    </Grid.Container>
  );
}

Underlined

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

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input 
          underlined 
          labelPlaceholder="Default" 
          color="default" />
      </Grid>
      <Grid>
        <Input 
          underlined 
          labelPlaceholder="Primary" 
          color="primary" 
        />
      </Grid>
      <Grid>
        <Input 
          underlined 
          labelPlaceholder="Secondary" 
          color="secondary" 
        />
      </Grid>
      <Grid>
        <Input 
          underlined 
          labelPlaceholder="Success" 
          color="success" 
        />
      </Grid>
      <Grid>
        <Input 
          underlined 
          labelPlaceholder="Warning" 
          color="warning" 
        />
      </Grid>
      <Grid>
        <Input 
          underlined 
          labelPlaceholder="Error" 
          color="error" 
        />
      </Grid>
    </Grid.Container>
  );
}

Rounded

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

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input
          rounded
          bordered
          label="Default"
          placeholder="Default"
          color="default"
        />
      </Grid>
      <Grid>
        <Input
          rounded
          bordered
          label="Primary"
          placeholder="Primary"
          color="primary"
        />
      </Grid>
      <Grid>
        <Input
          rounded
          bordered
          label="Secondary"
          placeholder="Secondary"
          color="secondary"
        />
      </Grid>
      <Grid>
        <Input
          rounded
          bordered
          label="Success"
          placeholder="Success"
          color="success"
        />
      </Grid>
      <Grid>
        <Input
          rounded
          bordered
          label="Warning"
          placeholder="Warning"
          color="warning"
        />
      </Grid>
      <Grid>
        <Input
          rounded
          bordered
          label="Error"
          placeholder="Error"
          color="error"
        />
      </Grid>
    </Grid.Container>
  );
}

Status

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

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input 
          labelPlaceholder="Default" 
          status="default" 
        />
      </Grid>
      <Grid>
        <Input 
          labelPlaceholder="Primary" 
          status="primary" 
        />
      </Grid>
      <Grid>
        <Input 
          labelPlaceholder="Secondary" 
          status="secondary" 
        />
      </Grid>
      <Grid>
        <Input 
          labelPlaceholder="Success" 
          status="success" 
        />
      </Grid>
      <Grid>
        <Input 
          labelPlaceholder="Warning" 
          status="warning" 
        />
      </Grid>
      <Grid>
        <Input 
          labelPlaceholder="Error" 
          status="error" 
        />
      </Grid>
    </Grid.Container>
  );
}

No Shadow

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

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input 
          shadow={false} 
          labelPlaceholder="Default" 
          status="default" 
        />
      </Grid>
      <Grid>
        <Input 
          shadow={false} 
          labelPlaceholder="Primary" 
          status="primary" 
        />
      </Grid>
      <Grid>
        <Input 
          shadow={false} 
          labelPlaceholder="Secondary" 
          status="secondary" 
        />
      </Grid>
      <Grid>
        <Input 
          shadow={false} 
          labelPlaceholder="Success" 
          status="success" 
        />
      </Grid>
      <Grid>
        <Input 
          shadow={false} 
          labelPlaceholder="Warning" 
          status="warning" 
        />
      </Grid>
      <Grid>
        <Input 
          shadow={false} 
          labelPlaceholder="Error" 
          status="error" 
        />
      </Grid>
    </Grid.Container>
  );
}

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

import React from "react";
import { Input, useInput, Grid } from "@nextui-org/react";


export default function App() {
  const { value, reset, bindings } = useInput("");
  
  const validateEmail = (value) => {
    return value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
  };

  const helper = React.useMemo(() => {
    if (!value)
      return {
        text: "",
        color: "",
      };
    const isValid = validateEmail(value);
    return {
      text: isValid ? "Correct email" : "Enter a valid email",
      color: isValid ? "success" : "error",
    };
  }, [value]);
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input
          {...bindings}
          clearable
          shadow={false}
          onClearClick={reset}
          status={helper.color}
          color={helper.color}
          helperColor={helper.color}
          helperText={helper.text}
          type="email"
          label="Email"
          placeholder="With regex validation"
        />
      </Grid>
      <Grid>
        <Input
          clearable
          helperText="Please enter your name"
          label="Name"
          placeholder="Enter your name"
        />
      </Grid>
      <Grid>
        <Input
          clearable
          color="error"
          helperText="Required"
          label="Error"
          placeholder="Enter something"
        />
      </Grid>
      <Grid>
        <Input
          clearable
          color="success"
          initialValue="getnextui"
          helperText="Excellent username"
          type="test"
          label="Username"
          placeholder="Enter your username"
        />
      </Grid>
      <Grid>
        <Input
          clearable
          color="warning"
          helperText="Insecure password"
          type="password"
          label="Password"
          placeholder="Enter your password"
        />
      </Grid>
      <Grid>
        <Input.Password
          clearable
          color="warning"
          initialValue="123"
          helperText="Insecure password"
          type="password"
          label="Password"
          placeholder="Enter your password with eye"
        />
      </Grid>
    </Grid.Container>
  );
}

Left/right labels

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

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input
          bordered
          labelLeft="https://"
          labelRight=".org"
          placeholder="nextui"
        />
      </Grid>
      <Grid>
        <Input 
          bordered 
          labelRight=".org" 
          placeholder="https://nextui" 
        />
      </Grid>
      <Grid>
        <Input 
          bordered 
          labelLeft="https://" 
          placeholder="nextui.org" 
        />
      </Grid>
      <Grid>
        <Input 
          labelLeft="username" 
          placeholder="getnextui" 
        />
      </Grid>
      <Grid>
        <Input 
          labelRight=".org" 
          placeholder="https://nextui" 
        />
      </Grid>
      <Grid>
        <Input 
          underlined 
          labelLeft="username" 
          placeholder="Next UI" 
        />
      </Grid>
    </Grid.Container>
  );
}

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.

import { Grid, Input, Loading } from '@nextui-org/react';
import { SunIcon } from "./SunIcon";
import { SendButton } from "./SendButton";
import { SendIcon } from "./SendIcon";

export default function App() {
  return (
    <>
      <Grid.Container gap={4}>
        <Grid>
          <Input
            clearable
            contentRightStyling={false}
            placeholder="Type your message..."
            contentRight={
              <SendButton>
                <SendIcon />
              </SendButton>
            }
          />
        </Grid>
        <Grid>
          <Input
            clearable
            underlined
            color="warning"
            labelPlaceholder="Sun icon"
            contentRight={
              <SunIcon filled width="16" height="16" fill="#f5a623" />
            }
          />
        </Grid>
        <Grid>
          <Input
            clearable
            bordered
            color="primary"
            labelPlaceholder="Loading..."
            contentRight={<Loading size="xs" />}
          />
        </Grid>
      </Grid.Container>
    </>
  );
}

No Animated

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

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input animated={false} labelPlaceholder="Default" status="default" />
      </Grid>
      <Grid>
        <Input
          underlined
          animated={false}
          labelPlaceholder="Primary"
          color="primary"
        />
      </Grid>
      <Grid>
        <Input
          bordered
          animated={false}
          labelPlaceholder="Secondary"
          color="secondary"
        />
      </Grid>
    </Grid.Container>
  );
}

Input Types

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

import { Input, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={4}>
      <Grid>
        <Input 
          label="Text" 
          type="text" 
        />
      </Grid>
      <Grid>
        <Input 
          label="Password" 
          type="password" 
        />
      </Grid>
      <Grid>
        <Input 
          label="Search" 
          type="search" 
        />
      </Grid>
      <Grid>
        <Input 
          label="Number" 
          type="number" 
        />
      </Grid>
      <Grid>
        <Input 
          label="Url" 
          type="url" 
        />
      </Grid>
      <Grid>
        <Input 
          width="186px" 
          label="Time" 
          type="time" 
        />
      </Grid>
      <Grid>
        <Input 
          width="186px" 
          label="Date" 
          type="date" 
        />
      </Grid>
    </Grid.Container>
  );
}

APIs

Input Props

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

Input