Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Area Teks

Terakhir diperbarui:

Textarea Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran xs-xl, model hantu. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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
textareaBasisInput teks multi-baris bergaya
textarea-softGayaLatar belakang berwarna teredam
textarea-ghostGayaTidak ada batas yang terlihat sampai fokus
textarea-dashedGayaGaya perbatasan putus-putus
textarea-xsUkuranSangat kecil
textarea-smUkuranKecil
textarea-mdUkuranSedang (standar)
textarea-lgUkuranBesar
textarea-xlUkuranEkstra besar
textarea-2xlUkuran2× ekstra besar
textarea-primaryWarnaBatas warna tema utama
textarea-secondaryWarnaBatas warna tema sekunder
textarea-accentWarnaBatas warna tema aksen
textarea-neutralWarnaBatas warna tema netral
textarea-infoWarnaBatas warna semantik info
textarea-successWarnaPerbatasan warna semantik sukses
textarea-warningWarnaBatas warna semantik peringatan
textarea-errorWarnaBatas 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

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>

Warna Area Teks

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>

Gaya Area Teks

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>

Area Teks Dinonaktifkan

html 
1
2
3
<textarea class="textarea" placeholder="Enabled textarea"></textarea>

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

Area teks dengan Label

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

Textarea dengan Jumlah Karakter

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>

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

Merender pemformatan langsung saat Anda mengetik — huruf tebal, judul, daftar, dan lainnya tampil dengan gaya sebaris.

<textarea id="hybrid-markdown-editor" name="content"></textarea>

1
2
3
import MarkdownEditor from "markdown-text-editor";

new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' });

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Area teks yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP