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.
Textarea bileşenleri kullanıcılardan gelen çok satırlı metin girişini yakalar; mesajlar, yorumlar, açıklamalar ve uzun biçimli içerik için mükemmeldir. Yerel HTML textarea öğeleriyle oluşturulan ve Tailwind CSS stiliyle geliştirilen textarea'ler birden fazla boyutu, rengi ve durumu destekler. Erişilebilir ve tamamen özelleştirilebilirler; formlara ve iletişim arayüzlerine sorunsuz bir şekilde entegre olurlar.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| textarea | Temel | Stilize edilmiş çok satırlı metin girişi |
| textarea-soft | Stil | Sessiz renkli arka plan |
| textarea-ghost | Stil | Odaklanana kadar görünür kenarlık yok |
| textarea-dashed | Stil | Kesikli kenarlık stili |
| textarea-xs | Boyut | Ekstra küçük |
| textarea-sm | Boyut | Küçük |
| textarea-md | Boyut | Orta (varsayılan) |
| textarea-lg | Boyut | Büyük |
| textarea-xl | Boyut | Ekstra büyük |
| textarea-2xl | Boyut | 2× ekstra büyük |
| textarea-primary | Renk | Birincil tema renk sınırı |
| textarea-secondary | Renk | İkincil tema renk sınırı |
| textarea-accent | Renk | Vurgu teması renk sınırı |
| textarea-neutral | Renk | Nötr tema renkli kenarlık |
| textarea-info | Renk | Bilgi anlamsal renk sınırı |
| textarea-success | Renk | Başarı anlamsal renk sınırı |
| textarea-warning | Renk | Uyarı anlamsal renk sınırı |
| textarea-error | Renk | Hata anlamsal renk sınırı |
Temel Kullanım
<textarea class="textarea" placeholder="Enter your message here..."></textarea> |
<textarea className="textarea" placeholder="Enter your message here..."></textarea> |
Metin Alanı Boyutları
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> |
Metin Alanı Renkleri
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> |
Metin Alanı Stilleri
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> |
Devre Dışı Metin Alanı
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
Etiketli Metin Alanı
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
Karakter Sayımı ile Textarea
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> |
Gelişmiş İşaretleme Düzenleyicisi
Herhangi bir metin alanını tam bir işaretleme düzenleyicisine dönüştürmek için markdown-text-editor'ü kullanın.
İki mod mevcuttur: düz (ham Markdown sözdizimi) ve karma (biçimlendirmeyi siz yazdıkça canlı olarak işler).
Daha fazla yapılandırma seçeneği için eklenti belgelerine bakın.
Düz Mod
Ham Markdown sözdizimini görüntüler. Kullanıcılar Markdown'ı doğrudan metin alanına yazar.
<textarea id="plain-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#plain-markdown-editor'); |
Hibrit Mod
Siz yazarken biçimlendirmeyi canlı olarak işler; kalın, başlıklar, listeler ve daha fazlası satır içi stilde görünür.
<textarea id="hybrid-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' }); |