Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
title description navigation related github prev next
Tailwind CSS Textarea for React - Material Tailwind
Customise your web projects with our easy-to-use textarea component for Tailwind CSS and React using Material Design guidelines.
textarea
textarea-variants
textarea-sizes
textarea-colors
textarea-validations
disabled-textarea
props
theme
title route description
Props
props/textarea
Learn more about props definition and types of textarea component.
title route description
Theme
theme/textarea
Learn how to customize the theme and styles for textarea component.
textarea
tabs
tooltip

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.


<Textarea label="Message" />
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.

<Textarea variant="outlined" label="Outlined" /> <Textarea variant="standard" label="Standard" /> <Textarea variant="static" label="Static" placeholder="Static" />
import { Textarea } from "@material-tailwind/react";

export default function Variants() {
  return (
    <div className="flex w-full items-end gap-4">
      <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 size="md" label="Textarea Medium" /> <Textarea size="lg" label="Textarea Large" />
import { Textarea } from "@material-tailwind/react";

export default function Sizes() {
  return (
    <div className="flex w-full items-end gap-4">
      <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 color="blue" label="Textarea Blue" /> <Textarea color="purple" label="Textarea Purple" /> <Textarea color="indigo" label="Textarea Indigo" /> <Textarea color="teal" label="Textarea Teal" />
import { Textarea } from "@material-tailwind/react";

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

export default function Validations() {
  return (
    <div className="flex w-full items-end gap-4">
      <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.

<Textarea label="Disabled" disabled />
import { Textarea } from "@material-tailwind/react";

export default function Example() {
  return (
    <div className="w-96">
      <Textarea label="Disabled" disabled />
    </div>
  );
}