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 function TextareaDefault() {
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 function TextareaVariants() {
return (
<div className="flex w-96 flex-col gap-6">
<Textarea variant="static" label="Static" placeholder="Static" />
<Textarea variant="standard" label="Standard" />
<Textarea variant="outlined" label="Outlined" />
</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 function TextareaSizes() {
return (
<div className="flex w-96 flex-col gap-6">
<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.
import { Textarea } from "@material-tailwind/react";
export function TextareaColors() {
return (
<div className="flex w-96 flex-col gap-6">
<Textarea color="gray" label="Textarea Gray" />
<Textarea color="blue-gray" label="Textarea Purple" />
<Textarea color="red" label="Textarea Red" />
<Textarea color="green" label="Textarea Green" />
</div>
);
}The Textarea component comes with error and success states for performing validations.
import { Textarea } from "@material-tailwind/react";
export function TextareaValidations() {
return (
<div className="flex w-96 flex-col gap-6">
<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 function TextareaDisabled() {
return (
<div className="w-96">
<Textarea label="Disabled" disabled />
</div>
);
}Use the example below for a comment box that uses Textarea component.
import { Textarea, Button, IconButton } from "@material-tailwind/react";
export function CommentBoxTextarea() {
return (
<div className="relative w-[32rem]">
<Textarea variant="static" placeholder="Your Comment" rows={8} />
<div className="flex w-full justify-between py-1.5">
<IconButton variant="text" color="blue-gray" size="sm">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-4 w-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
/>
</svg>
</IconButton>
<div className="flex gap-2">
<Button size="sm" color="red" variant="text" className="rounded-md">
Cancel
</Button>
<Button size="sm" className="rounded-md">
Post Comment
</Button>
</div>
</div>
</div>
);
}Use the example below for a chat input that uses Textarea component.
import { Textarea, Button, IconButton } from "@material-tailwind/react";
import { LinkIcon } from "@heroicons/react/24/outline";
export function TwitterChatboxTextarea() {
return (
<div className="flex w-full flex-row items-center gap-2 rounded-[99px] border border-gray-900/10 bg-gray-900/5 p-2">
<div className="flex">
<IconButton variant="text" className="rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
/>
</svg>
</IconButton>
<IconButton variant="text" className="rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"
/>
</svg>
</IconButton>
</div>
<Textarea
rows={1}
resize={true}
placeholder="Your Message"
className="min-h-full !border-0 focus:border-transparent"
containerProps={{
className: "grid h-full",
}}
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<div>
<IconButton variant="text" className="rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
/>
</svg>
</IconButton>
</div>
</div>
);
}
Comment Box Textarea