Easily create Textarea with different styles using our component based on Tailwind CSS. It is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
See below our example that will help you create a simple Textarea for your project. It also comes in different colors and styles, so you can adapt it easily to your needs.
import { Textarea } from "@material-tailwind/react";
export default function Example() {
return (
<div className="w-96">
<Textarea label="Message" />
</div>
);
}The Textarea component comes with 3 different variants that you can change it using the variant prop.
import { Textarea } from "@material-tailwind/react";
export default function Variants() {
return (
<div className="flex w-full items-end gap-4">
<Textarea variant="outlined" label="Outlined" />
<Textarea variant="standard" label="Standard" />
<Textarea variant="static" label="Static" placeholder="Static" />
</div>
);
}The Textarea component comes with 2 different sizes that you can change it using the size prop.
import { Textarea } from "@material-tailwind/react";
export default function Sizes() {
return (
<div className="flex w-full items-end gap-4">
<Textarea size="md" label="Textarea Medium" />
<Textarea size="lg" label="Textarea Large" />
</div>
);
}The Textarea 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 { Textarea } from "@material-tailwind/react";
export default function Colors() {
return (
<div className="flex w-96 flex-col gap-4">
<Textarea color="blue" label="Textarea Blue" />
<Textarea color="purple" label="Textarea Purple" />
<Textarea color="indigo" label="Textarea Indigo" />
<Textarea color="teal" label="Textarea Teal" />
</div>
);
}The Textarea component comes with error and success states for performing validations.
import { Textarea } from "@material-tailwind/react";
export default function Validations() {
return (
<div className="flex w-full items-end gap-4">
<Textarea label="Textarea Error" error />
<Textarea label="Textarea Success" success />
</div>
);
}A Textarea could be disabled as well, it will help you to prevent user interactions like click or focus over the Textarea component.
import { Textarea } from "@material-tailwind/react";
export default function Example() {
return (
<div className="w-96">
<Textarea label="Disabled" disabled />
</div>
);
}