Tailwind CSS Input - React

Easily create Input with different statuses and sizes using our components based on Tailwind CSS and React.

Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses.

See below our Input component examples. It comes in different styles and colors, so you can adapt it easily to your needs.

Required

Input Variants

The Input component comes with 3 different variants that you can change it using the variant prop.

Static

Standard

Outlined

import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-72 gap-6">
      <Input variant="static" label="Static" placeholder="Static" />
      <Input variant="standard" label="Standard" />
      <Input variant="outlined" label="Outlined" />
    </div>
  );
}

Input Sizes

The Input component comes with 2 different sizes that you can change it using the size prop.

Input Medium

Input Large

import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-72 items-end gap-6">
      <Input size="md" label="Input Medium" />
      <Input size="lg" label="Input Large" />
    </div>
  );
}

Input Colors

The Input component comes with 21 different colors that you can change it using the color prop.

Input Blue

Input Purple

Input Indigo

Input Teal

import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex w-72 flex-col gap-6">
      <Input color="blue" label="Input Blue" />
      <Input color="purple" label="Input Purple" />
      <Input color="indigo" label="Input Indigo" />
      <Input color="teal" label="Input Teal" />
    </div>
  );
}

Input Validations

The Input component comes with error and success states for performing validations.

Input Error

Input Success

import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-72 items-end gap-6">
      <Input label="Input Error" error />
      <Input label="Input Success" success />
    </div>
  );
}

Input With Icon

You can add icon for the Input component using the icon prop.

Input With Icon

import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-72">
      <Input label="Input With Icon" icon={<i className="fas fa-heart" />} />
    </div>
  );
}

Input With Helper Text

Use the example below for an input with a helper text.

Password

Use at least 8 characters, one uppercase, one lowercase and one number.

import { Input, Typography } from "@material-tailwind/react";
import { InformationCircleIcon } from "@heroicons/react/24/solid"
 
export default function Example() {
  return (
    <div className="w-[32rem]">
      <Input type="password" label="Password" />
      <Typography variant="small" color="gray" className="flex items-center gap-1 font-normal mt-2">
        <InformationCircleIcon className="w-4 h-4 -mt-px" />
        Use at least 8 characters, one uppercase, one lowercase and one number.
      </Typography>
    </div>
  );
}

Input With Button

Use the example below for an input containing a button inside.

Email Address

import React from "react";
import { Input, Button } from "@material-tailwind/react";
 
export default function Example() {
  const [email, setEmail] = React.useState("");
  const onChange = ({ target }) => setEmail(target.value);
  
  return (
    <div className="relative flex w-full max-w-[24rem]">
      <Input
        type="email"
        label="Email Address"
        value={email}
        onChange={onChange}
        className="pr-20"
        containerProps={{
          className: "min-w-0",
        }}
      />
      <Button
        size="sm"
        color={email ? "blue" : "blue-gray"}
        disabled={!email}
        className="!absolute right-1 top-1 rounded"
      >
        Invite
      </Button>
    </div>
  );
}

Input With Dropdown

Use the example below for an input containing a countries code dropdown.

import React from "react";
import { useCountries } from "use-react-countries";
import {
  Input,
  Menu,
  MenuHandler,
  MenuList,
  MenuItem,
  Button,
} from "@material-tailwind/react";
 
export default function Example() {
  const { countries } = useCountries();
  const [country, setCountry] = React.useState(0);
  const { name, flags, countryCallingCode } = countries[country];
 
  return (
    <div className="relative flex w-full max-w-[24rem]">
      <Menu placement="bottom-start">
        <MenuHandler>
          <Button
            ripple={false}
            variant="text"
            color="blue-gray"
            className="flex h-10 items-center gap-2 rounded-r-none border border-r-0 border-blue-gray-200 bg-blue-gray-500/10 pl-3"
          >
            <img
              src={flags.svg}
              alt={name}
              className="h-4 w-4 rounded-full object-cover"
            />
            {countryCallingCode}
          </Button>
        </MenuHandler>
        <MenuList className="max-h-[20rem] max-w-[18rem]">
          {countries.map(
            ({ name, flags, countryCallingCode }, index) => {
              return (
                <MenuItem
                  key={name}
                  value={name}
                  className="flex items-center gap-2"
                  onClick={() => setCountry(index)}
                >
                  <img
                    src={flags.svg}
                    alt={name}
                    className="h-5 w-5 rounded-full object-cover"
                  />
                  {name} <span className="ml-auto">{countryCallingCode}</span>
                </MenuItem>
              );
            }
          )}
        </MenuList>
      </Menu>
      <Input
        type="tel"
        placeholder="Mobile Number"
        className="rounded-l-none !border-t-blue-gray-200 focus:!border-t-blue-500"
        labelProps={{
          className: "before:content-none after:content-none",
        }}
        containerProps={{
          className: "min-w-0",
        }}
      />
    </div>
  );
}

Disabled Input

An Input could be disabled as well, it will help you to prevent user interactions like click or focus over the Input component.

Disabled

Props

Learn more about props definition and types of input component.

Theme

Learn how to customize the theme and styles for input component.

icon button

form

Edit this page on Github

Tailwind CSS Input - React

Input Variants

Input Sizes

Input Colors

Input Validations

Input With Icon

Input With Helper Text

Input With Button

Input With Dropdown

Disabled Input

Related

Props

Theme