Tailwind CSS Input - React

Easily create inputs 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 example. It comes in different styles and colors, so you can adapt it easily to your needs.


import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return <Input label="Username" />;
}

Input Variants

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

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

Input Sizes

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

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

Input Colors

The input component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

import { Input } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex flex-col gap-4 w-72">
      <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.

import { Input } from "@material-tailwind/react";
 
export default function Validations() {
  return (
    <div className="flex items-end gap-4 w-full">
      <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.

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

Props

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

AttributeTypeDescriptionDefault
variantVariantChange input variantoutlined
sizeSizeChange input sizemd
colorColorChange input colorblue
labelstringAdd label for input''
errorbooleanChange input state to errorfalse
successbooleanChange input state to successfalse
iconnodeAdd icon for the inputundefined
labelPropsObjectAdd custom props for input labelundefined
classNamestringAdd custom className for input''

Types

type variant = "standard" | "outlined" | "static";
type variant = "md" | "lg";
type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

icon button

menu

Edit this page on Github