Passer au contenu principal
Frutjam logo Frutjam
v2.2.5
Theme

Composant de zone de texte

Dernière mise à jour:

Zone de texte CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl, style fantôme. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

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
textareaBaseStyled multi-line text input
textarea-softStyleFond teinté en sourdine
textarea-ghostStyleAucune bordure visible jusqu'à la mise au point
textarea-dashedStyleStyle de bordure en pointillés
textarea-xsTailleTrès petit
textarea-smTaillePetit
textarea-mdTailleMoyen (par défaut)
textarea-lgTailleGrand
textarea-xlTailleTrès grand
textarea-2xlTaille2× très grand
textarea-primaryCouleurBordure de couleur du thème principal
textarea-secondaryCouleurBordure de couleur du thème secondaire
textarea-accentCouleurBordure de couleur du thème d'accentuation
textarea-neutralCouleurBordure de couleur thème neutre
textarea-infoCouleurBordure de couleur sémantique d'information
textarea-successCouleurBordure de couleur sémantique du succès
textarea-warningCouleurBordure de couleur sémantique d'avertissement
textarea-errorCouleurBordure 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

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>

Textarea Colors

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>

Textarea Styles

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>

Disabled Textarea

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

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

Textarea with Label

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

Textarea with Character Count

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 'https://cdn.jsdelivr.net/npm/markdown-text-editor/+esm';

new MarkdownEditor('#plain-markdown-editor');

Hybrid Mode

Restitue le formatage en direct au fur et à mesure que vous tapez : les caractères gras, les titres, les listes et bien plus encore apparaissent stylisés en ligne.

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

1
2
3
import MarkdownEditor from 'https://cdn.jsdelivr.net/npm/markdown-text-editor/+esm';

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

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Zone de texte sur demande. Fini les cours hallucinés.

Essayez Cherry MCP