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.
Komponen Textarea menangkap input teks multi-baris dari pengguna, cocok untuk pesan, komentar, deskripsi, dan konten berdurasi panjang. Dibuat dengan elemen textarea HTML asli dan disempurnakan dengan gaya Tailwind CSS, textarea mendukung berbagai ukuran, warna, dan status. Dapat diakses dan disesuaikan sepenuhnya, mereka terintegrasi dengan mulus ke dalam formulir dan antarmuka komunikasi.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
|---|---|---|
| textarea | Basis | Input teks multi-baris bergaya |
| textarea-soft | Gaya | Latar belakang berwarna teredam |
| textarea-ghost | Gaya | Tidak ada batas yang terlihat sampai fokus |
| textarea-dashed | Gaya | Gaya perbatasan putus-putus |
| textarea-xs | Ukuran | Sangat kecil |
| textarea-sm | Ukuran | Kecil |
| textarea-md | Ukuran | Sedang (standar) |
| textarea-lg | Ukuran | Besar |
| textarea-xl | Ukuran | Ekstra besar |
| textarea-2xl | Ukuran | 2× ekstra besar |
| textarea-primary | Warna | Batas warna tema utama |
| textarea-secondary | Warna | Batas warna tema sekunder |
| textarea-accent | Warna | Batas warna tema aksen |
| textarea-neutral | Warna | Batas warna tema netral |
| textarea-info | Warna | Batas warna semantik info |
| textarea-success | Warna | Perbatasan warna semantik sukses |
| textarea-warning | Warna | Batas warna semantik peringatan |
| textarea-error | Warna | Batas warna semantik salah |
Penggunaan Dasar
<textarea class="textarea" placeholder="Enter your message here..."></textarea> |
<textarea className="textarea" placeholder="Enter your message here..."></textarea> |
Ukuran Area Teks
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> |
Warna Area Teks
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> |
Gaya Area Teks
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> |
Area Teks Dinonaktifkan
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
Area teks dengan Label
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
Textarea dengan Jumlah Karakter
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> |
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.
Plain Mode
Displays raw Markdown syntax. Users write Markdown directly in the textarea.
<textarea id="plain-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#plain-markdown-editor'); |
Hybrid Mode
Renders formatting live as you type — bold, headings, lists, and more appear styled inline.
<textarea id="hybrid-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' }); |