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 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 (
<div className="w-72">
<Input label="Username" />
</div>
);
}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 w-full items-end gap-4">
<Input variant="outlined" label="Outlined" />
<Input variant="standard" label="Standard" />
<Input variant="static" label="Static" placeholder="Static" />
</div>
);
}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 w-full items-end gap-4">
<Input size="md" label="Input Medium" />
<Input size="lg" label="Input Large" />
</div>
);
}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 w-72 flex-col gap-4">
<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>
);
}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 w-full items-end gap-4">
<Input label="Input Error" error />
<Input label="Input Success" success />
</div>
);
}You can add icon for the Input component using the icon prop.
import { Input } from "@material-tailwind/react";
export default function InputWithIcon() {
return (
<div className="w-72">
<Input label="Input With Icon" icon={<i className="fas fa-heart" />} />
</div>
);
}An Input could be disabled as well, it will help you to prevent user interactions like click or focus over the Input component.
import { Input } from "@material-tailwind/react";
export default function InputWithIcon() {
return (
<div className="w-72">
<Input label="Disabled" disabled />
</div>
);
}