---
title: "Textarea"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Textarea using native HTML elements. Custom sizes, error states, and label integration for accessible multi-line form input fields."
url: https://frutjam.com/components/textarea
---

# Textarea Component

 Textarea components capture multi-line text input from users, perfect for messages, comments, descriptions, and long-form content. Built with native HTML textarea elements and enhanced with Tailwind CSS styling, textareas support multiple sizes, colors, and states. Accessible and fully customizable, they integrate seamlessly into forms and communication interfaces.

| Class              | Type  | Description                     |
| ------------------ | ----- | ------------------------------- |
| textarea           | Base  | Styled multi-line text input    |
| textarea-soft      | Style | Muted tinted background         |
| textarea-ghost     | Style | No visible border until focused |
| textarea-dashed    | Style | Dashed border style             |
| textarea-xs        | Size  | Extra small                     |
| textarea-sm        | Size  | Small                           |
| textarea-md        | Size  | Medium (default)                |
| textarea-lg        | Size  | Large                           |
| textarea-xl        | Size  | Extra large                     |
| textarea-2xl       | Size  | 2× extra large                  |
| textarea-primary   | Color | Primary theme color border      |
| textarea-secondary | Color | Secondary theme color border    |
| textarea-accent    | Color | Accent theme color border       |
| textarea-neutral   | Color | Neutral theme color border      |
| textarea-info      | Color | Info semantic color border      |
| textarea-success   | Color | Success semantic color border   |
| textarea-warning   | Color | Warning semantic color border   |
| textarea-error     | Color | Error semantic color border     |

## Basic Usage

## Textarea Sizes

```html
<textarea class="textarea textarea-xs" placeholder="Extra Small"></textarea>

<textarea class="textarea textarea-sm" placeholder="Small"></textarea>

<textarea class="textarea textarea-md" placeholder="Medium"></textarea>

<textarea class="textarea textarea-lg" placeholder="Large"></textarea>

<textarea class="textarea textarea-xl" placeholder="Extra Large"></textarea>

<textarea class="textarea textarea-2xl" placeholder="2X Large"></textarea>
```


## Textarea Colors

```html
<textarea class="textarea" placeholder="Default"></textarea>

<textarea class="textarea textarea-primary" placeholder="Primary"></textarea>

<textarea class="textarea textarea-secondary" placeholder="Secondary"></textarea>

<textarea class="textarea textarea-accent" placeholder="Accent"></textarea>

<textarea class="textarea textarea-info" placeholder="Info"></textarea>

<textarea class="textarea textarea-success" placeholder="Success"></textarea>

<textarea class="textarea textarea-warning" placeholder="Warning"></textarea>

<textarea class="textarea textarea-error" placeholder="Error"></textarea>
```


## Textarea Styles

```html
<textarea class="textarea" placeholder="Default style"></textarea>

<textarea class="textarea textarea-soft" placeholder="Soft style"></textarea>

<textarea class="textarea textarea-dashed" placeholder="Dashed style"></textarea>

<textarea class="textarea textarea-ghost" placeholder="Ghost style"></textarea>
```


## Disabled Textarea

```html
<textarea class="textarea" placeholder="Enabled textarea"></textarea>

<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
```


## Textarea with Label

```html
<label>
  <span>Your feedback</span>
  <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea>
</label>
```


## Textarea with Character Count

```html
<label>
  <span>Write a message (max 200 characters)</span>
  <textarea class="textarea w-full" placeholder="Type here..." maxlength="200"></textarea>
  <span>Characters remaining</span>
</label>
```


## Advanced Markdown Editor

Use `markdown-text-editor` to turn any textarea into a full markdown editor.
 Two modes are available: **plain** (raw Markdown syntax) and **hybrid** (renders formatting live as you type).
 For more configuration options see [the plugin docs](https://frutjam.com/plugins/markdown-editor).

### Plain Mode

Displays raw Markdown syntax. Users write Markdown directly in the textarea.

### Hybrid Mode

Renders formatting live as you type — bold, headings, lists, and more appear styled inline.