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.

Input Demo

Here's how to implement a simple and responsive Input component. It is perfect for forms requiring text input, such as user registration, login forms, or any form where users need to input a username.

import { Input } from "@material-tailwind/react";

export function InputDemo() {
  return (
    <Input className="w-72">
      <Input.Field placeholder="Input" />
    </Input>
  );
}

import { Input } from "@material-tailwind/react";

export function InputDemo() {
  return (
    <Input className="w-72">
      <Input.Field placeholder="Input" />
    </Input>
  );
}

Input Sizes

We provide different input sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the input size.

In the example below, we've showcased the different input sizes that you can use in your project.

import { Input } from "@material-tailwind/react";

export function InputSizes() {
  return (
    <div className="w-72 space-y-4">
      <Input size="sm">
        <Input.Field placeholder="Input Small" />
      </Input>
      <Input size="md">
        <Input.Field placeholder="Input Medium" />
      </Input>
      <Input size="lg">
        <Input.Field placeholder="Input Large" />
      </Input>
    </div>
  );
}

import { Input } from "@material-tailwind/react";

export function InputSizes() {
  return (
    <div className="w-72 space-y-4">
      <Input size="sm">
        <Input.Field placeholder="Input Small" />
      </Input>
      <Input size="md">
        <Input.Field placeholder="Input Medium" />
      </Input>
      <Input size="lg">
        <Input.Field placeholder="Input Large" />
      </Input>
    </div>
  );
}

Input Color

We provide different input colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the input color.

In the example below, we've showcased the different input colors that you can use in your project.

import { Input } from "@material-tailwind/react";

export function InputColors() {
  return (
    <div className="w-72 space-y-4">
      <Input color="primary">
        <Input.Field placeholder="Input Primary" />
      </Input>
      <Input color="secondary">
        <Input.Field placeholder="Input Secondary" />
      </Input>
      <Input color="info">
        <Input.Field placeholder="Input Info" />
      </Input>
      <Input color="success">
        <Input.Field placeholder="Input Success" />
      </Input>
      <Input color="warning">
        <Input.Field placeholder="Input Warning" />
      </Input>
      <Input color="error">
        <Input.Field placeholder="Input Error" />
      </Input>
    </div>
  );
}

import { Input } from "@material-tailwind/react";

export function InputColors() {
  return (
    <div className="w-72 space-y-4">
      <Input color="primary">
        <Input.Field placeholder="Input Primary" />
      </Input>
      <Input color="secondary">
        <Input.Field placeholder="Input Secondary" />
      </Input>
      <Input color="info">
        <Input.Field placeholder="Input Info" />
      </Input>
      <Input color="success">
        <Input.Field placeholder="Input Success" />
      </Input>
      <Input color="warning">
        <Input.Field placeholder="Input Warning" />
      </Input>
      <Input color="error">
        <Input.Field placeholder="Input Error" />
      </Input>
    </div>
  );
}

Input with Validation

We provide helpful props like isError and isSuccess for showing error and success states of an input. In the example below, we've showcased the Input component with error and success states that you can use in your project.

Something went wrong!

Congratulations 🎉

import { Input, Typography } from "@material-tailwind/react";

export function InputWithValidation() {
  return (
    <div className="w-72 space-y-6">
      <Input isError color="error" className="w-full">
        <Input.Field placeholder="Input Error" />
        <Typography type="small" color="error" className="mt-1 block">
          Something went wrong!
        </Typography>
      </Input>
      <Input isSuccess color="success" className="w-full">
        <Input.Field placeholder="Input Success" />
        <Typography type="small" color="success" className="mt-1 block">
          Congratulations 🎉
        </Typography>
      </Input>
    </div>
  );
}

import { Input, Typography } from "@material-tailwind/react";

export function InputWithValidation() {
  return (
    <div className="w-72 space-y-6">
      <Input isError color="error" className="w-full">
        <Input.Field placeholder="Input Error" />
        <Typography type="small" color="error" className="mt-1 block">
          Something went wrong!
        </Typography>
      </Input>
      <Input isSuccess color="success" className="w-full">
        <Input.Field placeholder="Input Success" />
        <Typography type="small" color="success" className="mt-1 block">
          Congratulations 🎉
        </Typography>
      </Input>
    </div>
  );
}

Input with Icon

You can add an icon to the start or end of the input to make it more visually appealing and informative. Use the example below to create inputs with icon.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

import { Input } from "@material-tailwind/react";
import { ProfileCircle, Lock } from "iconoir-react";

export function InputWithIcon() {
  return (
    <div className="w-72 space-y-4">
      <Input>
        <Input.Field placeholder="Username" />
        <Input.Icon>
          <ProfileCircle className="h-full w-full" />
        </Input.Icon>
      </Input>
      <Input>
        <Input.Field type="password" placeholder="Password" />
        <Input.Icon placement="end">
          <Lock className="h-full w-full" />
        </Input.Icon>
      </Input>
    </div>
  );
}

import { Input } from "@material-tailwind/react";
import { ProfileCircle, Lock } from "iconoir-react";

export function InputWithIcon() {
  return (
    <div className="w-72 space-y-4">
      <Input>
        <Input.Field placeholder="Username" />
        <Input.Icon>
          <ProfileCircle className="h-full w-full" />
        </Input.Icon>
      </Input>
      <Input>
        <Input.Field type="password" placeholder="Password" />
        <Input.Icon placement="end">
          <Lock className="h-full w-full" />
        </Input.Icon>
      </Input>
    </div>
  );
}

Input with Label

The Input component can be used with a label to provide more context to the user. In the example below, we've added a label to the input by using the Input and Typography components together.

import { Input, Typography } from "@material-tailwind/react";

export function InputWithLabel() {
  return (
    <div className="w-72 space-y-1">
      <Typography
        as="label"
        htmlFor="email"
        type="small"
        color="default"
        className="font-semibold"
      >
        Email
      </Typography>
      <Input>
        <Input.Field
          id="email"
          type="email"
          placeholder="[email protected]"
        />
      </Input>
    </div>
  );
}

import { Input, Typography } from "@material-tailwind/react";

export function InputWithLabel() {
  return (
    <div className="w-72 space-y-1">
      <Typography
        as="label"
        htmlFor="email"
        type="small"
        color="default"
        className="font-semibold"
      >
        Email
      </Typography>
      <Input>
        <Input.Field
          id="email"
          type="email"
          placeholder="[email protected]"
        />
      </Input>
    </div>
  );
}

Input with Helper Text

You can use Input and Typography components together to provide more details for the input. In the example below, we've added a hint text with an icon below the input field to provide more context to the user.

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

import { Input, Typography } from "@material-tailwind/react";
import { InfoCircle } from "iconoir-react";

export function InputWithHelperText() {
  return (
    <div className="w-72 space-y-2">
      <Input>
        <Input.Field type="password" placeholder="Password" />
      </Input>
      <div className="flex gap-1.5 text-foreground">
        <InfoCircle className="h-3.5 w-3.5 shrink-0 translate-y-[3px] stroke-2" />
        <Typography type="small">
          Use at least 8 characters, one uppercase, one lowercase and one
          number.
        </Typography>
      </div>
    </div>
  );
}

import { Input, Typography } from "@material-tailwind/react";
import { InfoCircle } from "iconoir-react";

export function InputWithHelperText() {
  return (
    <div className="w-72 space-y-2">
      <Input>
        <Input.Field type="password" placeholder="Password" />
      </Input>
      <div className="flex gap-1.5 text-foreground">
        <InfoCircle className="h-3.5 w-3.5 shrink-0 translate-y-[3px] stroke-2" />
        <Typography type="small">
          Use at least 8 characters, one uppercase, one lowercase and one
          number.
        </Typography>
      </div>
    </div>
  );
}

Input with Button

You can use Input and Button components together for submitting the input data. In the example below, we've created a subscription form using Input and Button components.

import { Button, Input } from "@material-tailwind/react";

export function InputWithButton() {
  return (
    <form
      action="#"
      className="flex w-full max-w-sm items-center justify-center gap-2"
    >
      <Input>
        <Input.Field type="email" placeholder="[email protected]" />
      </Input>
      <Button type="submit">Subscribe</Button>
    </form>
  );
}

import { Button, Input } from "@material-tailwind/react";

export function InputWithButton() {
  return (
    <form
      action="#"
      className="flex w-full max-w-sm items-center justify-center gap-2"
    >
      <Input>
        <Input.Field type="email" placeholder="[email protected]" />
      </Input>
      <Button type="submit">Subscribe</Button>
    </form>
  );
}

You can use Input and Menu components together for creating more complex input fields. In the example below, we've created an input with a dropdown for selecting the country code and typing mobile number.

In the example below we've used the use-react-countries library, for getting the countries name, flag and country-code.

import * as React from "react";
import { Input, Menu, Button } from "@material-tailwind/react";
import { useCountries } from "use-react-countries";

export function InputWithDropdown() {
  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">
        <Menu.Trigger
          as={Button}
          color="secondary"
          className="flex h-10 items-center gap-2 rounded-r-none border border-r-0 border-surface bg-secondary pl-3"
        >
          <img
            src={flags.svg}
            alt={name}
            className="h-4 w-4 rounded-full object-cover"
          />
          {countryCallingCode}
        </Menu.Trigger>
        <Menu.Content className="h-72 max-w-[18rem] overflow-y-auto">
          {countries.map(({ name, flags, countryCallingCode }, index) => {
            return (
              <Menu.Item
                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>
              </Menu.Item>
            );
          })}
        </Menu.Content>
      </Menu>
      <Input className="w-72">
        <Input.Field placeholder="Mobile Number" className="rounded-l-none" />
      </Input>
    </div>
  );
}

import * as React from "react";
import { Input, Menu, Button } from "@material-tailwind/react";
import { useCountries } from "use-react-countries";

export function InputWithDropdown() {
  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">
        <Menu.Trigger
          as={Button}
          color="secondary"
          className="flex h-10 items-center gap-2 rounded-r-none border border-r-0 border-surface bg-secondary pl-3"
        >
          <img
            src={flags.svg}
            alt={name}
            className="h-4 w-4 rounded-full object-cover"
          />
          {countryCallingCode}
        </Menu.Trigger>
        <Menu.Content className="h-72 max-w-[18rem] overflow-y-auto">
          {countries.map(({ name, flags, countryCallingCode }, index) => {
            return (
              <Menu.Item
                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>
              </Menu.Item>
            );
          })}
        </Menu.Content>
      </Menu>
      <Input className="w-72">
        <Input.Field placeholder="Mobile Number" className="rounded-l-none" />
      </Input>
    </div>
  );
}

Input Disabled

You can disable the input by adding the disabled prop. This will prevent the user from interacting with the input field.

import { Input } from "@material-tailwind/react";

export function InputDisabled() {
  return (
    <Input disabled className="w-72">
      <Input.Field placeholder="Input" />
    </Input>
  );
}

import { Input } from "@material-tailwind/react";

export function InputDisabled() {
  return (
    <Input disabled className="w-72">
      <Input.Field placeholder="Input" />
    </Input>
  );
}

Input Custom Styles

You can use className prop to customize the Input component style. In the example below, we make a simple input field with an icon and a border to it's bottom.

import { Input } from "@material-tailwind/react";
import { ProfileCircle } from "iconoir-react";

export function InputCustomStyles() {
  return (
    <Input className="w-72">
      <Input.Field
        placeholder="Username"
        className="rounded-none border-0 border-b border-gray-400 pe-0.5 ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:ps-[26px]"
      />
      <Input.Icon className="data-[placement=start]:left-px">
        <ProfileCircle className="h-full w-full" />
      </Input.Icon>
    </Input>
  );
}

import { Input } from "@material-tailwind/react";
import { ProfileCircle } from "iconoir-react";

export function InputCustomStyles() {
  return (
    <Input className="w-72">
      <Input.Field
        placeholder="Username"
        className="rounded-none border-0 border-b border-gray-400 pe-0.5 ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:ps-[26px]"
      />
      <Input.Icon className="data-[placement=start]:left-px">
        <ProfileCircle className="h-full w-full" />
      </Input.Icon>
    </Input>
  );
}

On this page

Scroll to top

Roots of UI/UX Design

By Creative TimLearn to Develop Intuitive Web Experiences

Tailwind CSS Input - React

#Input Demo

#Input Sizes

#Input Color

#Input with Validation

#Input with Icon

#Input with Label

#Input with Helper Text

#Input with Button

#Input with Dropdown

#Input Disabled

#Input Custom Styles