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.

Message

Textarea Variants

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

Static

Standard

Outlined

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>
  );
}

Textarea Sizes

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

Textarea Medium

Textarea Large

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>
  );
}

Textarea Colors

The Textarea component comes with 19 different colors that you can change it using the color prop.

Textarea Blue

Textarea Purple

Textarea Indigo

Textarea Teal

import { Textarea } from "@material-tailwind/react";
 
export function TextareaColors() {
  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.

Textarea Error

Textarea Success

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>
  );
}

Textarea Disabled

A Textarea could be disabled as well, it will help you to prevent user interactions like click or focus over the Textarea component.

Disabled

Comment Box Textarea

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>
  );
}

Twitter Chatbox Textarea

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-blue-gray-500/20 bg-blue-500/10 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>
  );
}

tabs

timeline

Edit this page on Github