Tailwind CSS Textarea - React

Easily create Textarea component with different styles using our component based on React and styled with 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 examples that will help you create a simple Textarea components for your project. Choose from different colors and styles, so you can adapt the component easily to your needs.

Textarea Demo

Here's how to implement a simple and responsive Textarea component. It is perfect for forms requiring comment box, such as user review form.

Textarea Sizes

We provide different textarea sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the textarea size.

In the example below, we've showcased the different textarea sizes that you can use in your project.

Textarea Color

We provide different textarea colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the textarea color.

In the example below, we've showcased the different textarea colors that you can use in your project.

Textarea with Validation

We provide helpful props like isError and isSuccess for showing error and success states of a textarea. In the example below, we've showcased the Textarea component with error and success states that you can use in your project.

Something went wrong!
Congratulations 🎉

Textarea with Label

The Textarea component can be used with a label to provide more context to the user. In the example below, we've added a label by using the Textarea and Typography components together.

Textarea with Helper Text

You can use Textarea and Typography components together to provide more details for the textarea. In the example below, we've added a hint text with an icon below the textarea to provide more context to the user.

Use at least 255 characters and a maximum of 1000 characters.

Textarea Disabled

You can disable the textarea by adding the disabled prop. This will prevent the user from interacting with the textarea.

Comment Box with Textarea

In the example below, we've showcased the commnet box built with Textarea, IconButton and Button components that you can use in your project.

Chatbox with Textarea

In the example below, we've showcased the a chatbox like X/Twitter built with Textarea and IconButton components that you can use in your project.