---
title: "Textarea"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/zh-hant/components/textarea
---

# Textarea Component

文字區域元件可擷取使用者的多行文字輸入，非常適合訊息、評論、描述和長格式內容。文字區域採用原生 HTML 文字區域元素構建，並透過 Tailwind CSS 樣式進行增強，支援多種尺寸、顏色和狀態。它們可訪問且完全可定制，可無縫整合到表單和通訊介面中。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                 | 類型 | 描述         |
| ------------------ | --- | ---------- |
| textarea           | 根據 | 樣式多行文字輸入   |
| textarea-soft      | 風格 | 柔和的有色背景    |
| textarea-ghost     | 風格 | 聚焦之前沒有可見邊框 |
| textarea-dashed    | 風格 | 虛線邊框樣式     |
| textarea-xs        | 尺寸 | 特小號        |
| textarea-sm        | 尺寸 | 小的         |
| textarea-md        | 尺寸 | 中（預設）      |
| textarea-lg        | 尺寸 | 大的         |
| textarea-xl        | 尺寸 | 特大號        |
| textarea-2xl       | 尺寸 | 2×特大號      |
| textarea-primary   | 顏色 | 主要主題顏色邊框   |
| textarea-secondary | 顏色 | 次要主題顏色邊框   |
| textarea-accent    | 顏色 | 強調主題顏色邊框   |
| textarea-neutral   | 顏色 | 中性主題色邊框    |
| textarea-info      | 顏色 | 訊息語意顏色邊框   |
| textarea-success   | 顏色 | 成功語意顏色邊框   |
| textarea-warning   | 顏色 | 警告語意顏色邊框   |
| textarea-error     | 顏色 | 錯誤語意顏色邊框   |

## 基本用法

## 文字區域大小

```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>
```

## 文字區域顏色

```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>
```

## 文字區域樣式

```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>
```

## 禁用文字區域

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

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

## 標籤的文字區域

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

## 具有字元數的文字區域

```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>
```

## 進階 Markdown 編輯器

使用 `markdown-text-editor` 將任何文字區域變成完整的 Markdown 編輯器。
 有兩種模式可用：**純文字**（原始 Markdown 語法）和**混合**（在您輸入時即時呈現格式）。
 如需更多配置選項，請參閱[插件文件](https://frutjam.com/plugins/markdown-editor)。

### 普通模式

顯示原始 Markdown 語法。使用者直接在文字區域中編寫 Markdown。

### 混合模式

在您鍵入時即時呈現格式 — 粗體、標題、清單等以內嵌樣式顯示。