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

import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return <Textarea label="Message" />;
}

Textarea Variants

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

Outlined

Standard

Static

import { Textarea } from "@material-tailwind/react";
 
export default function Variants() {
  return (
    <div className="flex items-end gap-4 w-full">
      <Textarea variant="outlined" label="Outlined" />
      <Textarea variant="standard" label="Standard" />
      <Textarea variant="static" label="Static" placeholder="Static" />
    </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 default function Sizes() {
  return (
    <div className="flex items-end gap-4 w-full">
      <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, below there are some examples of the colors but you can check all of the them here.

Textarea Blue

Textarea Purple

Textarea Indigo

Textarea Teal

import { Textarea } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex flex-col gap-4 w-96">
      <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 default function Validations() {
  return (
    <div className="flex items-end gap-4 w-full">
      <Textarea label="Textarea Error" error />
      <Textarea label="Textarea Success" success />
    </div>
  );
}

Props

The following props are available for the textarea component. These are the custom props that come with we've added for the textarea component and you can use all the other native textarea props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change textarea variant	`outlined`
`size`	Size	Change textarea size	`md`
`color`	Color	Change textarea color	`blue`
`label`	`string`	Add label for textarea	`''`
`error`	`boolean`	Change textarea state to error	`false`
`success`	`boolean`	Change textarea state to success	`false`
`resize`	`boolean`	Makes textarea resizable	`false`
`labelProps`	`Object`	Add custom props for textarea label	`undefined`
`className`	`string`	Add custom className for textarea	`''`

Types

type variant = "standard" | "outlined" | "static";

type variant = "md" | "lg";

type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

tabs

tooltip

Edit this page on Github