Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Textarea-Komponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Textbereich mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs-xl, Ghost-Stil. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Textarea-Komponenten erfassen mehrzeilige Texteingaben von Benutzern und eignen sich perfekt für Nachrichten, Kommentare, Beschreibungen und lange Inhalte. Textbereiche wurden mit nativen HTML-Textbereichselementen erstellt und mit Tailwind CSS-Stil erweitert und unterstützen mehrere Größen, Farben und Zustände. Sie sind zugänglich und vollständig anpassbar und lassen sich nahtlos in Formulare und Kommunikationsschnittstellen integrieren.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
textareaBaseGestylte mehrzeilige Texteingabe
textarea-softStilGedämpfter getönter Hintergrund
textarea-ghostStilKein sichtbarer Rand bis zur Fokussierung
textarea-dashedStilGestrichelter Randstil
textarea-xsGrößeExtra klein
textarea-smGrößeKlein
textarea-mdGrößeMittel (Standard)
textarea-lgGrößeGroß
textarea-xlGrößeExtra groß
textarea-2xlGröße2× extra groß
textarea-primaryFarbeFarbrand des primären Themas
textarea-secondaryFarbeFarbrand des sekundären Themas
textarea-accentFarbeFarbumrandung des Akzentthemas
textarea-neutralFarbeNeutraler Themenfarbrand
textarea-infoFarbeInfo-semantischer Farbrand
textarea-successFarbeErfolgssemantischer Farbrand
textarea-warningFarbeWarnender semantischer Farbrand
textarea-errorFarbeFehler beim semantischen Farbrand

Grundlegende Verwendung

<textarea class="textarea" placeholder="Enter your message here..."></textarea>

<textarea className="textarea" placeholder="Enter your message here..."></textarea>

Textbereichsgrößen

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>

Textbereichsfarben

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>

Textbereichsstile

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>

Deaktivierter Textbereich

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

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

Textbereich mit Beschriftung

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

Textbereich mit Zeichenanzahl

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>

Erweiterter Markdown-Editor

Verwenden Sie markdown-text-editor, um jeden Textbereich in einen vollständigen Markdown-Editor umzuwandeln. Es stehen zwei Modi zur Verfügung: einfach (rohe Markdown-Syntax) und Hybrid (formatiert live, während Sie tippen). Weitere Konfigurationsoptionen finden Sie in den Plugin-Dokumenten.

Einfacher Modus

Zeigt die rohe Markdown-Syntax an. Benutzer schreiben Markdown direkt in den Textbereich.

<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');

Hybridmodus

Stellt die Formatierung während der Eingabe live dar – Fettdruck, Überschriften, Listen und mehr werden im Inline-Stil angezeigt.

<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' });

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Textbereich-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP