Tailwind CSS Textarea - React
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>
);
}
Textarea Variants
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 flex-col w-96 gap-6">
<Textarea variant="static" label="Static" placeholder="Static" />
<Textarea variant="standard" label="Standard" />
<Textarea variant="outlined" label="Outlined" />
</div>
);
}
Textarea Sizes
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 flex-col w-96 gap-6">
<Textarea size="md" label="Textarea Medium" />
<Textarea size="lg" label="Textarea Large" />
</div>
);
}
Textarea Colors
The Textarea component comes with 19 different colors that you can change it using the color prop.
import { Textarea } from "@material-tailwind/react";
export default function Colors() {
return (
<div className="flex w-96 flex-col gap-6">
<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>
);
}
Textarea Validations
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 flex-col w-96 gap-6">
<Textarea label="Textarea Error" error />
<Textarea label="Textarea Success" success />
</div>
);
}
Disabled Textarea
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>
);
}