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.

Username

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 function InputVariants() {
  return (
    <div className="flex w-72 flex-col 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 function InputSizes() {
  return (
    <div className="flex w-72 flex-col 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 function InputColors() {
  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 function InputValidations() {
  return (
    <div className="flex w-72 flex-col items-end gap-6">
      <Input label="Input Error" error />
      <Input label="Input Success" success />
    </div>
  );
}

Input Icon

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

Input With Icon

import { Input } from "@material-tailwind/react";
 
export function InputIcon() {
  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";
 
export function InputWithHelperText() {
  return (
    <div className="w-[32rem]">
      <Input type="password" label="Password" />
      <Typography
        variant="small"
        color="gray"
        className="mt-2 flex items-center gap-1 font-normal"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          className="-mt-px h-4 w-4"
        >
          <path
            fillRule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
            clipRule="evenodd"
          />
        </svg>
        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 function InputWithButton() {
  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>
  );
}

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

This example is using use-react-countries make sure you have installed it.

npm i use-react-countries

import React from "react";
import { useCountries } from "use-react-countries";
import {
  Input,
  Menu,
  MenuHandler,
  MenuList,
  MenuItem,
  Button,
} from "@material-tailwind/react";
 
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">
        <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>
  );
}

Input Disabled

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

Disabled

Input for Dark Surface

You can use the color="white" for Input to make it visible and accessible on dark surfaces.

Email Address

import { Input } from "@material-tailwind/react";
 
export function InputForDarkSurface() {
  return (
    <div className="w-72">
      <Input type="email" color="white" label="Email Address" />
    </div>
  );
}

Input Custom Styles

You can use the className, labelProps and containerProps props to add custom styles to the Input component.

import { Input } from "@material-tailwind/react";
 
export function InputCustomStyles() {
  return (
    <div className="w-72">
      <Input
        type="email"
        placeholder="Email Address"
        className="!border !border-blue-gray-50 bg-white text-blue-gray-500 shadow-lg shadow-blue-gray-900/5 ring-4 ring-transparent placeholder:text-blue-gray-200 focus:!border-blue-500 focus:!border-t-blue-500 focus:ring-blue-500/20"
        labelProps={{
          className: "hidden",
        }}
        containerProps={{ className: "min-w-[100px]" }}
      />
    </div>
  );
}

Input Props

The following props are available for input component. These are the custom props that we've added for the input component and you can use all the other native input props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change input variant	`outlined`
`size`	Size	Change input size	`md`
`color`	Color	Change input color	`blue`
`label`	`string`	Add label for input	`''`
`error`	`boolean`	Change input state to error	`false`
`success`	`boolean`	Change input state to success	`false`
`icon`	`node`	Add icon for the input	`undefined`
`labelProps`	`object`	Add custom props for input label	`undefined`
`containerProps`	`object`	Add custom props for input container	`undefined`
`className`	`string`	Add custom className for input	`''`
`shrink`	`boolean`	Makes the input floated by default.	`false`
`inputRef`	`ref`	Add reference for `input` element.	`undefined`

For TypeScript Only

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

Types - Variant

type variant = "standard" | "outlined" | "static";

Types - Size

type size = "md" | "lg";

Types - Color

type color =
  | "blakc"
  | "white"
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

Input Theme

Learn how to customize the theme and styles for input component, the theme object for input component has three main objects:

A. The defaultProps object for setting up the default value for props of input component.
B. The valid object for customizing the valid values for input component props.
C. The styles object for customizing the theme and styles of input component.

You can customize the theme and styles of input component by adding Tailwind CSS classes as key paired values for objects.

Input Theme Object Type

Variant of Input component theme has a specific type of Input Variant Styles Type

interface InputStylesType {
  defaultProps: {
    variant: string;
    size: string;
    color: string;
    label: string;
    error: boolean;
    success: boolean;
    icon: node;
    labelProps: object;
    containerProps: object;
    className: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: {
      container: object;
      input: object;
      label: object;
      icon: object;
      asterisk: object;
    };
    variants: {
      outlined: InputVariantStylesType;
      standard: InputVariantStylesType;
      static: InputVariantStylesType;
    };
  };
}

For TypeScript Only

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

Theme Object Type - Input Variant

Input variant object type contains two specific types of Input Size Styles Type and Input State Styles Type

interface InputVariantStylesType {
  base: {
    input: object;
    inputWithIcon: object;
    icon: object;
    label: object;
  };
  sizes: {
    md: InputSizeStylesType;
    lg: InputSizeStylesType;
  };
  colors: {
    input: object;
    label: object;
  };
  error: InputStateStylesType;
  success: InputStateStylesType;
  shrink: InputStateStylesType;
}

For TypeScript Only

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

Theme Object Type - Input Size

interface InputSizeStylesType {
  container: object;
  input: object;
  label: object;
  icon: object;
}

For TypeScript Only

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

Theme Object Type - Input State

interface InputStateStylesType {
  input: object;
  label: object;
}

For TypeScript Only

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

Input Theme Customization

const theme = {
  input: {
    defaultProps: {
      variant: "outlined",
      size: "md",
      color: "blue",
      label: "",
      error: false,
      success: false,
      icon: undefined,
      labelProps: undefined,
      containerProps: undefined,
      shrink: false,
      className: "",
    },
    valid: {
      variants: ["standard", "outlined", "static"],
      sizes: ["md", "lg"],
      colors: [
        "black",
        "white",
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        container: {
          position: "relative",
          width: "w-full",
          minWidth: "min-w-[200px]",
        },
        input: {
          peer: "peer",
          width: "w-full",
          height: "h-full",
          bg: "bg-transparent",
          color: "text-blue-gray-700",
          fontFamily: "font-sans",
          fontWeight: "font-normal",
          outline: "outline outline-0 focus:outline-0",
          disabled: "disabled:bg-blue-gray-50 disabled:border-0",
          transition: "transition-all",
        },
        label: {
          display: "flex",
          width: "w-full",
          height: "h-full",
          userSelect: "select-none",
          pointerEvents: "pointer-events-none",
          position: "absolute",
          left: "left-0",
          fontWeight: "font-normal",
          textOverflow: "truncate",
          color: "peer-placeholder-shown:text-blue-gray-500",
          lineHeight: "leading-tight peer-focus:leading-tight",
          disabled:
            "peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500",
          transition: "transition-all",
        },
        icon: {
          display: "grid",
          placeItems: "place-items-center",
          position: "absolute",
          color: "text-blue-gray-500",
        },
        asterisk: {
          display: "inline-block",
          color: "text-red-500",
          ml: "ml-0.5",
        },
      },
      variants: {
        outlined: {
          base: {
            input: {
              borderWidth: "placeholder-shown:border",
              borderColor:
                "placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200",
              floated: {
                borderWidth: "border focus:border-2",
                borderColor: "border-t-transparent focus:border-t-transparent",
              },
            },
            inputWithIcon: {
              pr: "!pr-9",
            },
            icon: {
              top: "top-2/4",
              right: "right-3",
              transform: "-translate-y-2/4",
            },
            label: {
              position: "-top-1.5",
              fontSize: "peer-placeholder-shown:text-sm",
              floated: {
                fontSize: "text-[11px] peer-focus:text-[11px]",
              },
              before: {
                content: "before:content[' ']",
                display: "before:block",
                boxSizing: "before:box-border",
                width: "before:w-2.5",
                height: "before:h-1.5",
                mt: "before:mt-[6.5px]",
                mr: "before:mr-1",
                borderColor: "peer-placeholder-shown:before:border-transparent",
                borderRadius: "before:rounded-tl-md",
                floated: {
                  bt: "before:border-t peer-focus:before:border-t-2",
                  bl: "before:border-l peer-focus:before:border-l-2",
                },
                pointerEvents: "before:pointer-events-none",
                transition: "before:transition-all",
                disabled: "peer-disabled:before:border-transparent",
              },
              after: {
                content: "after:content[' ']",
                display: "after:block",
                flexGrow: "after:flex-grow",
                boxSizing: "after:box-border",
                width: "after:w-2.5",
                height: "after:h-1.5",
                mt: "after:mt-[6.5px]",
                ml: "after:ml-1",
                borderColor: "peer-placeholder-shown:after:border-transparent",
                borderRadius: "after:rounded-tr-md",
                floated: {
                  bt: "after:border-t peer-focus:after:border-t-2",
                  br: "after:border-r peer-focus:after:border-r-2",
                },
                pointerEvents: "after:pointer-events-none",
                transition: "after:transition-all",
                disabled: "peer-disabled:after:border-transparent",
              },
            },
          },
          sizes: {
            md: {
              container: {
                height: "h-10",
              },
              input: {
                fontSize: "text-sm",
                px: "px-3",
                py: "py-2.5",
                borderRadius: "rounded-[7px]",
              },
              label: {
                lineHeight: "peer-placeholder-shown:leading-[3.75]",
              },
              icon: {
                width: "w-5",
                height: "h-5",
              },
            },
            lg: {
              container: {
                height: "h-11",
              },
              input: {
                fontSize: "text-sm",
                px: "px-3",
                py: "py-3",
                borderRadius: "rounded-md",
              },
              label: {
                lineHeight: "peer-placeholder-shown:leading-[4.1]",
              },
              icon: {
                width: "w-6",
                height: "h-6",
              },
            },
          },
          colors: {
            input: {
              black: {
                color: "text-black",
                borderColor: "border-black",
                borderColorFocused: "focus:border-black",
              },
              white: {
                color: "text-white",
                borderColor: "border-white",
                borderColorFocused: "focus:border-white",
              },
              "blue-gray": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-blue-gray-500",
              },
              gray: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-gray-500",
              },
              brown: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-brown-500",
              },
              "deep-orange": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-deep-orange-500",
              },
              orange: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-orange-500",
              },
              amber: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-amber-500",
              },
              yellow: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-yellow-500",
              },
              lime: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-lime-500",
              },
              "light-green": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-light-green-500",
              },
              green: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-green-500",
              },
              teal: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-teal-500",
              },
              cyan: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-cyan-500",
              },
              "light-blue": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-light-blue-500",
              },
              blue: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-blue-500",
              },
              indigo: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-indigo-500",
              },
              "deep-purple": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-deep-purple-500",
              },
              purple: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-purple-500",
              },
              pink: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-pink-500",
              },
              red: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-red-500",
              },
            },
            label: {
              black: {
                color: "!text-black peer-focus:text-black",
                before: "before:border-black peer-focus:before:!border-black",
                after: "after:border-black peer-focus:after:!border-black",
              },
              white: {
                color: "!text-white peer-focus:text-white",
                before: "before:border-white peer-focus:before:!border-white",
                after: "after:border-white peer-focus:after:!border-white",
              },
              "blue-gray": {
                color: "text-blue-gray-400 peer-focus:text-blue-gray-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-blue-gray-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-blue-gray-500",
              },
              gray: {
                color: "text-blue-gray-400 peer-focus:text-gray-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-gray-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-gray-500",
              },
              brown: {
                color: "text-blue-gray-400 peer-focus:text-brown-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-brown-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-brown-500",
              },
              "deep-orange": {
                color: "text-blue-gray-400 peer-focus:text-deep-orange-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-deep-orange-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-deep-orange-500",
              },
              orange: {
                color: "text-blue-gray-400 peer-focus:text-orange-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-orange-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-orange-500",
              },
              amber: {
                color: "text-blue-gray-400 peer-focus:text-amber-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-amber-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-amber-500",
              },
              yellow: {
                color: "text-blue-gray-400 peer-focus:text-yellow-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-yellow-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-yellow-500",
              },
              lime: {
                color: "text-blue-gray-400 peer-focus:text-lime-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-lime-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-lime-500",
              },
              "light-green": {
                color: "text-blue-gray-400 peer-focus:text-light-green-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-light-green-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-light-green-500",
              },
              green: {
                color: "text-blue-gray-400 peer-focus:text-green-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-green-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-green-500",
              },
              teal: {
                color: "text-blue-gray-400 peer-focus:text-teal-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-teal-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-teal-500",
              },
              cyan: {
                color: "text-blue-gray-400 peer-focus:text-cyan-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-cyan-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-cyan-500",
              },
              "light-blue": {
                color: "text-blue-gray-400 peer-focus:text-light-blue-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-light-blue-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-light-blue-500",
              },
              blue: {
                color: "text-blue-gray-400 peer-focus:text-blue-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-blue-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-blue-500",
              },
              indigo: {
                color: "text-blue-gray-400 peer-focus:text-indigo-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-indigo-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-indigo-500",
              },
              "deep-purple": {
                color: "text-blue-gray-400 peer-focus:text-deep-purple-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-deep-purple-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-deep-purple-500",
              },
              purple: {
                color: "text-blue-gray-400 peer-focus:text-purple-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-purple-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-purple-500",
              },
              pink: {
                color: "text-blue-gray-400 peer-focus:text-pink-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-pink-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-pink-500",
              },
              red: {
                color: "text-blue-gray-400 peer-focus:text-red-500",
                before: "before:border-blue-gray-200 peer-focus:before:!border-red-500",
                after: "after:border-blue-gray-200 peer-focus:after:!border-red-500",
              },
            },
          },
          error: {
            input: {
              borderColor:
                "border-red-500 placeholder-shown:border-t-red-500 placeholder-shown:border-red-500",
              borderColorFocused: "focus:border-red-500",
            },
            label: {
              color: "text-red-500 peer-focus:text-red-500 peer-placeholder-shown:text-red-500",
              before: "before:border-red-500 peer-focus:before:border-red-500",
              after: "after:border-red-500 peer-focus:after:border-red-500",
            },
          },
          success: {
            input: {
              borderColor:
                "border-green-500 placeholder-shown:border-t-green-500 placeholder-shown:border-green-500",
              borderColorFocused: "focus:border-green-500",
            },
            label: {
              color: "text-green-500 peer-focus:text-green-500 peer-placeholder-shown:text-green-500",
              before: "before:border-green-500 peer-focus:before:border-green-500",
              after: "after:border-green-500 peer-focus:after:border-green-500",
            },
          },
          shrink: {
            input: {
              borderTop: "!border-t-transparent",
            },
            label: {
              fontSize: "!text-[11px]",
              lineHeight: "!leading-tight",
              borderColor: "before:!border-blue-gray-200 after:!border-blue-gray-200",
            },
          },
        },
        standard: {
          base: {
            input: {
              borderWidth: "border-b",
              borderColor: "placeholder-shown:border-blue-gray-200",
            },
            inputWithIcon: {
              pr: "!pr-7",
            },
            icon: {
              top: "top-2/4",
              right: "right-0",
              transform: "-translate-y-1/4",
            },
            label: {
              position: "-top-1.5",
              fontSize: "peer-placeholder-shown:text-sm",
              floated: {
                fontSize: "text-[11px] peer-focus:text-[11px]",
              },
              after: {
                content: "after:content[' ']",
                display: "after:block",
                width: "after:w-full",
                position: "after:absolute",
                bottom: "after:-bottom-1.5",
                left: "left-0",
                borderWidth: "after:border-b-2",
                scale: "after:scale-x-0",
                floated: {
                  scale: "peer-focus:after:scale-x-100",
                },
                transition: "after:transition-transform after:duration-300",
              },
            },
          },
          sizes: {
            md: {
              container: {
                height: "h-11",
              },
              input: {
                fontSize: "text-sm",
                pt: "pt-4",
                pb: "pb-1.5",
              },
              label: {
                lineHeight: "peer-placeholder-shown:leading-[4.25]",
              },
              icon: {
                width: "w-5",
                height: "h-5",
              },
            },
            lg: {
              container: {
                height: "h-12",
              },
              input: {
                fontSize: "text-sm",
                px: "px-px",
                pt: "pt-5",
                pb: "pb-2",
              },
              label: {
                lineHeight: "peer-placeholder-shown:leading-[4.875]",
              },
              icon: {
                width: "w-6",
                height: "h-6",
              },
            },
          },
          colors: {
            input: {
              black: {
                color: "text-black",
                borderColor: "border-black",
                borderColorFocused: "focus:border-black",
              },
              white: {
                color: "text-white",
                borderColor: "border-white",
                borderColorFocused: "focus:border-white",
              },
              "blue-gray": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-blue-gray-500",
              },
              gray: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-gray-500",
              },
              brown: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-brown-500",
              },
              "deep-orange": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-deep-orange-500",
              },
              orange: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-orange-500",
              },
              amber: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-amber-500",
              },
              yellow: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-yellow-500",
              },
              lime: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-lime-500",
              },
              "light-green": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-light-green-500",
              },
              green: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-green-500",
              },
              teal: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-teal-500",
              },
              cyan: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-cyan-500",
              },
              "light-blue": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-light-blue-500",
              },
              blue: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-blue-500",
              },
              indigo: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-indigo-500",
              },
              "deep-purple": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-deep-purple-500",
              },
              purple: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-purple-500",
              },
              pink: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-pink-500",
              },
              red: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-red-500",
              },
            },
            label: {
              black: {
                color: "!text-black peer-focus:text-black",
                after: "after:border-black peer-focus:after:border-black",
              },
              white: {
                color: "!text-white peer-focus:text-white",
                after: "after:border-white peer-focus:after:border-white",
              },
              "blue-gray": {
                color: "text-blue-gray-500 peer-focus:text-blue-gray-500",
                after: "after:border-blue-gray-500 peer-focus:after:border-blue-gray-500",
              },
              gray: {
                color: "text-blue-gray-500 peer-focus:text-gray-500",
                after: "after:border-gray-500 peer-focus:after:border-gray-500",
              },
              brown: {
                color: "text-blue-gray-500 peer-focus:text-brown-500",
                after: "after:border-brown-500 peer-focus:after:border-brown-500",
              },
              "deep-orange": {
                color: "text-blue-gray-500 peer-focus:text-deep-orange-500",
                after: "after:border-deep-orange-500 peer-focus:after:border-deep-orange-500",
              },
              orange: {
                color: "text-blue-gray-500 peer-focus:text-orange-500",
                after: "after:border-orange-500 peer-focus:after:border-orange-500",
              },
              amber: {
                color: "text-blue-gray-500 peer-focus:text-amber-500",
                after: "after:border-amber-500 peer-focus:after:border-amber-500",
              },
              yellow: {
                color: "text-blue-gray-500 peer-focus:text-yellow-500",
                after: "after:border-yellow-500 peer-focus:after:border-yellow-500",
              },
              lime: {
                color: "text-blue-gray-500 peer-focus:text-lime-500",
                after: "after:border-lime-500 peer-focus:after:border-lime-500",
              },
              "light-green": {
                color: "text-blue-gray-500 peer-focus:text-light-green-500",
                after: "after:border-light-green-500 peer-focus:after:border-light-green-500",
              },
              green: {
                color: "text-blue-gray-500 peer-focus:text-green-500",
                after: "after:border-green-500 peer-focus:after:border-green-500",
              },
              teal: {
                color: "text-blue-gray-500 peer-focus:text-teal-500",
                after: "after:border-teal-500 peer-focus:after:border-teal-500",
              },
              cyan: {
                color: "text-blue-gray-500 peer-focus:text-cyan-500",
                after: "after:border-cyan-500 peer-focus:after:border-cyan-500",
              },
              "light-blue": {
                color: "text-blue-gray-500 peer-focus:text-light-blue-500",
                after: "after:border-light-blue-500 peer-focus:after:border-light-blue-500",
              },
              blue: {
                color: "text-blue-gray-500 peer-focus:text-blue-500",
                after: "after:border-blue-500 peer-focus:after:border-blue-500",
              },
              indigo: {
                color: "text-blue-gray-500 peer-focus:text-indigo-500",
                after: "after:border-indigo-500 peer-focus:after:border-indigo-500",
              },
              "deep-purple": {
                color: "text-blue-gray-500 peer-focus:text-deep-purple-500",
                after: "after:border-deep-purple-500 peer-focus:after:border-deep-purple-500",
              },
              purple: {
                color: "text-blue-gray-500 peer-focus:text-purple-500",
                after: "after:border-purple-500 peer-focus:after:border-purple-500",
              },
              pink: {
                color: "text-blue-gray-500 peer-focus:text-pink-500",
                after: "after:border-pink-500 peer-focus:after:border-pink-500",
              },
              red: {
                color: "text-blue-gray-500 peer-focus:text-red-500",
                after: "after:border-red-500 peer-focus:after:border-red-500",
              },
            },
          },
          error: {
            input: {
              borderColor: "border-red-500 placeholder-shown:border-red-500",
              borderColorFocused: "focus:border-red-500",
            },
            label: {
              color: "text-red-500 peer-focus:text-red-500 peer-placeholder-shown:text-red-500",
              after: "after:border-red-500 peer-focus:after:border-red-500",
            },
          },
          success: {
            input: {
              borderColor: "border-green-500 placeholder-shown:border-green-500",
              borderColorFocused: "focus:border-green-500",
            },
            label: {
              color: "text-green-500 peer-focus:text-green-500 peer-placeholder-shown:text-green-500",
              after: "after:border-green-500 peer-focus:after:border-green-500",
            },
          },
          shrink: {
            input: {},
            label: {
              fontSize: "!text-[11px]",
              lineHeight: "!leading-tight",
            },
          },
        },
        static: {
          base: {
            input: {
              borderWidth: "border-b",
              borderColor: "placeholder-shown:border-blue-gray-200",
            },
            inputWithIcon: {
              pr: "!pr-7",
            },
            icon: {
              top: "top-2/4",
              right: "right-0",
              transform: "-translate-y-1/4",
            },
            label: {
              position: "-top-2.5",
              fontSize: "text-sm peer-focus:text-sm",
              after: {
                content: "after:content[' ']",
                display: "after:block",
                width: "after:w-full",
                position: "after:absolute",
                bottom: "after:-bottom-2.5",
                left: "left-0",
                borderWidth: "after:border-b-2",
                scale: "after:scale-x-0",
                floated: {
                  scale: "peer-focus:after:scale-x-100",
                },
                transition: "after:transition-transform after:duration-300",
              },
            },
          },
          sizes: {
            md: {
              container: {
                height: "h-11",
              },
              input: {
                fontSize: "text-sm",
                pt: "pt-4",
                pb: "pb-1.5",
              },
              label: {
                lineHeight: "peer-placeholder-shown:leading-tight",
              },
              icon: {
                width: "w-5",
                height: "h-5",
              },
            },
            lg: {
              container: {
                height: "h-12",
              },
              input: {
                fontSize: "text-sm",
                px: "px-px",
                pt: "pt-5",
                pb: "pb-2",
              },
              label: {
                lineHeight: "peer-placeholder-shown:leading-tight",
              },
              icon: {
                width: "w-6",
                height: "h-6",
              },
            },
          },
          colors: {
            input: {
              black: {
                color: "text-black",
                borderColor: "border-black",
                borderColorFocused: "focus:border-black",
              },
              white: {
                color: "text-white",
                borderColor: "border-white",
                borderColorFocused: "focus:border-white",
              },
              "blue-gray": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-blue-gray-500",
              },
              gray: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-gray-500",
              },
              brown: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-brown-500",
              },
              "deep-orange": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-deep-orange-500",
              },
              orange: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-orange-500",
              },
              amber: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-amber-500",
              },
              yellow: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-yellow-500",
              },
              lime: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-lime-500",
              },
              "light-green": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-light-green-500",
              },
              green: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-green-500",
              },
              teal: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-teal-500",
              },
              cyan: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-cyan-500",
              },
              "light-blue": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-light-blue-500",
              },
              blue: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-blue-500",
              },
              indigo: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-indigo-500",
              },
              "deep-purple": {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-deep-purple-500",
              },
              purple: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-purple-500",
              },
              pink: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-pink-500",
              },
              red: {
                borderColor: "border-blue-gray-200",
                borderColorFocused: "focus:border-red-500",
              },
            },
            label: {
              black: {
                color: "!text-black peer-focus:black",
                after: "after:border-black peer-focus:after:border-black",
              },
              white: {
                color: "!text-white peer-focus:white",
                after: "after:border-white peer-focus:after:border-white",
              },
              "blue-gray": {
                color: "text-blue-gray-500 peer-focus:text-blue-gray-500",
                after: "after:border-blue-gray-500 peer-focus:after:border-blue-gray-500",
              },
              gray: {
                color: "text-blue-gray-500 peer-focus:text-gray-500",
                after: "after:border-gray-500 peer-focus:after:border-gray-500",
              },
              brown: {
                color: "text-blue-gray-500 peer-focus:text-brown-500",
                after: "after:border-brown-500 peer-focus:after:border-brown-500",
              },
              "deep-orange": {
                color: "text-blue-gray-500 peer-focus:text-deep-orange-500",
                after: "after:border-deep-orange-500 peer-focus:after:border-deep-orange-500",
              },
              orange: {
                color: "text-blue-gray-500 peer-focus:text-orange-500",
                after: "after:border-orange-500 peer-focus:after:border-orange-500",
              },
              amber: {
                color: "text-blue-gray-500 peer-focus:text-amber-500",
                after: "after:border-amber-500 peer-focus:after:border-amber-500",
              },
              yellow: {
                color: "text-blue-gray-500 peer-focus:text-yellow-500",
                after: "after:border-yellow-500 peer-focus:after:border-yellow-500",
              },
              lime: {
                color: "text-blue-gray-500 peer-focus:text-lime-500",
                after: "after:border-lime-500 peer-focus:after:border-lime-500",
              },
              "light-green": {
                color: "text-blue-gray-500 peer-focus:text-light-green-500",
                after: "after:border-light-green-500 peer-focus:after:border-light-green-500",
              },
              green: {
                color: "text-blue-gray-500 peer-focus:text-green-500",
                after: "after:border-green-500 peer-focus:after:border-green-500",
              },
              teal: {
                color: "text-blue-gray-500 peer-focus:text-teal-500",
                after: "after:border-teal-500 peer-focus:after:border-teal-500",
              },
              cyan: {
                color: "text-blue-gray-500 peer-focus:text-cyan-500",
                after: "after:border-cyan-500 peer-focus:after:border-cyan-500",
              },
              "light-blue": {
                color: "text-blue-gray-500 peer-focus:text-light-blue-500",
                after: "after:border-light-blue-500 peer-focus:after:border-light-blue-500",
              },
              blue: {
                color: "text-blue-gray-500 peer-focus:text-blue-500",
                after: "after:border-blue-500 peer-focus:after:border-blue-500",
              },
              indigo: {
                color: "text-blue-gray-500 peer-focus:text-indigo-500",
                after: "after:border-indigo-500 peer-focus:after:border-indigo-500",
              },
              "deep-purple": {
                color: "text-blue-gray-500 peer-focus:text-deep-purple-500",
                after: "after:border-deep-purple-500 peer-focus:after:border-deep-purple-500",
              },
              purple: {
                color: "text-blue-gray-500 peer-focus:text-purple-500",
                after: "after:border-purple-500 peer-focus:after:border-purple-500",
              },
              pink: {
                color: "text-blue-gray-500 peer-focus:text-pink-500",
                after: "after:border-pink-500 peer-focus:after:border-pink-500",
              },
              red: {
                color: "text-blue-gray-500 peer-focus:text-red-500",
                after: "after:border-red-500 peer-focus:after:border-red-500",
              },
            },
          },
          error: {
            input: {
              borderColor: "border-red-500 placeholder-shown:border-red-500",
              borderColorFocused: "focus:border-red-500",
            },
            label: {
              color: "text-red-500 peer-focus:text-red-500 peer-placeholder-shown:text-red-500",
              after: "after:border-red-500 peer-focus:after:border-red-500",
            },
          },
          success: {
            input: {
              borderColor: "border-green-500 placeholder-shown:border-green-500",
              borderColorFocused: "focus:border-green-500",
            },
            label: {
              color: "text-green-500 peer-focus:text-green-500 peer-placeholder-shown:text-green-500",
              after: "after:border-green-500 peer-focus:after:border-green-500",
            },
          },
          shrink: {
            input: {},
            label: {},
          },
        },
      },
    },
  },
};

icon button

form

Edit this page on Github

Tailwind CSS Input - React

Input Variants

Input Sizes

Input Colors

Input Validations

Input Icon

Input With Helper Text

Input With Button

Input With Dropdown

Input Disabled

Input for Dark Surface

Input Custom Styles

Input Props

For TypeScript Only

Types - Variant

Types - Size

Types - Color

Input Theme

Input Theme Object Type

For TypeScript Only

Theme Object Type - Input Variant

For TypeScript Only

Theme Object Type - Input Size

For TypeScript Only

Theme Object Type - Input State

For TypeScript Only

Input Theme Customization