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 components capture multi-line text input from users, perfect for messages, comments, descriptions, and long-form content. Built with native HTML textarea elements and enhanced with Tailwind CSS styling, textareas support multiple sizes, colors, and states. Accessible and fully customizable, they integrate seamlessly into forms and communication interfaces.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| textarea | Base | Styled multi-line text input |
| textarea-soft | Style | Fond teinté en sourdine |
| textarea-ghost | Style | Aucune bordure visible jusqu'à la mise au point |
| textarea-dashed | Style | Style de bordure en pointillés |
| textarea-xs | Taille | Très petit |
| textarea-sm | Taille | Petit |
| textarea-md | Taille | Moyen (par défaut) |
| textarea-lg | Taille | Grand |
| textarea-xl | Taille | Très grand |
| textarea-2xl | Taille | 2× très grand |
| textarea-primary | Couleur | Bordure de couleur du thème principal |
| textarea-secondary | Couleur | Bordure de couleur du thème secondaire |
| textarea-accent | Couleur | Bordure de couleur du thème d'accentuation |
| textarea-neutral | Couleur | Bordure de couleur thème neutre |
| textarea-info | Couleur | Bordure de couleur sémantique d'information |
| textarea-success | Couleur | Bordure de couleur sémantique du succès |
| textarea-warning | Couleur | Bordure de couleur sémantique d'avertissement |
| textarea-error | Couleur | Bordure de couleur sémantique d'erreur |
Utilisation de base
<textarea class="textarea" placeholder="Enter your message here..."></textarea> |
<textarea className="textarea" placeholder="Enter your message here..."></textarea> |
Textarea Sizes
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> |
Textarea Colors
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> |
Textarea Styles
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> |
Disabled Textarea
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
Textarea with Label
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
Textarea with Character Count
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' }); |