Textarea Component
CSS-only Tailwind CSS textarea with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
文字區域元件可擷取使用者的多行文字輸入，非常適合訊息、評論、描述和長格式內容。文字區域採用原生 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 | 顏色 | 錯誤語意顏色邊框 |
基本用法
<textarea class="textarea" placeholder="Enter your message here..."></textarea> |
<textarea className="textarea" placeholder="Enter your message here..."></textarea> |
文字區域大小
html
1 2 3 4 5 6 7 8 9 10 11 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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
1 2 3 4 5 6 7 | <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
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
標籤的文字區域
html
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
具有字元數的文字區域
html
1 2 3 4 5 | <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 語法）和混合（在您輸入時即時呈現格式）。
如需更多配置選項，請參閱插件文件。
普通模式
顯示原始 Markdown 語法。使用者直接在文字區域中編寫 Markdown。
<textarea id="plain-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#plain-markdown-editor'); |
混合模式
在您鍵入時即時呈現格式 — 粗體、標題、清單等以內嵌樣式顯示。
<textarea id="hybrid-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' }); |