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 { 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.

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.

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.

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.

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.

AttributeTypeDescriptionDefault
variantVariantChange textarea variantoutlined
sizeSizeChange textarea sizemd
colorColorChange textarea colorblue
labelstringAdd label for textarea''
errorbooleanChange textarea state to errorfalse
successbooleanChange textarea state to successfalse
resizebooleanMakes textarea resizablefalse
labelPropsObjectAdd custom props for textarea labelundefined
classNamestringAdd 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";