Tailwind CSS React Textarea - Horizon UI

Easily create Textarea with different styles using our component based on Tailwind CSS React. 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.

About Me

import { TextField } from "components/fields/TextField";
 
      <TextField
        label="About Me"
        placeholder="Tell something about yourself!"
        id="textarea"
        cols="30"
        rows="7"
      />

Textarea Validations

The Textarea component comes with error and success states for performing validations.

About Me

import { Textarea } from "@material-tailwind/react";
 
export default function Validations() {
  return (
    <div className="flex flex-col w-96 gap-6">
      <TextField
        state="success"
        label="About Me"
        placeholder="Tell something about yourself!"
        id="textarea"
        cols="30"
        rows="7"
      />
      <TextField
        state="error"
        label="About Me"
        placeholder="Tell something about yourself!"
        id="textarea"
        cols="30"
        rows="7"
      />
    </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.

About Me

import { Textarea } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-96">
      <TextField
        disabled
        label="About Me"
        placeholder="Tell something about yourself!"
        id="textarea"
        cols="30"
        rows="7"
      />
    </div>
  );
}

switch

tooltip