Textarea Textbereich
Einführung
Ein mehrzeiliges Freitext-Eingabesteuerelement zum Erfassen längerer Benutzereingaben wie Kommentare, Beschreibungen, Feedback oder lange Formularübermittlungen. Es läuft in der Zero-JS-Client-Architektur als vollständig barrierefreies Layout.
Verwendung
Die Textarea-Komponente ist als textarea-Block vollständig in den Page Builder integriert, sodass Autoren Platzhalter, Hilfetexte, Validierungsregeln, Größen und Autosize-Verhalten leicht konfigurieren können.
Diese Beispiele zeigen, wie Redakteure Textbereiche binden und strukturieren.
1. Standard-Textbereich mit Hilfetext
Eine Standard-Mehrzeileneingabe mit Label und erklärendem Hilfetext. Ideal für einfache Feedback-Felder.
{
"type": "textarea",
"label": "Public Comment",
"placeholder": "Share your thoughts...",
"helperText": "Comments are visible to all workspace members.",
"interactive": true
}
2. Kompakter Bereich mit Zeichenzähler und Max-Länge
Ein mittelgroßer Bereich mit Zeichenlimit und aktiviertem Autosize, der live den Zähler anzeigt.
{
"type": "textarea",
"label": "Status Update",
"placeholder": "What's happening?",
"maxLength": 200,
"showCount": true,
"autoresize": true,
"size": "sm",
"interactive": true
}
3. Ungültiger Fehlerstatus-Textbereich
Zeigt den Fehler-Status, aktiviert Invalid-Ränder und füllt einen Fehlertext zur Client-Anzeige vorab.
{
"type": "textarea",
"label": "Account Bio",
"placeholder": "Tell us about yourself",
"invalid": true,
"errorText": "Bio cannot contain profanity.",
"interactive": true
}
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Label-Text (label) | string | - | Beschreibender Titel über dem Textbereich. |
Platzhalter (placeholder) | string | - | Ghost-Text innerhalb des leeren Feldes. |
Hilfetext (helperText) | string | - | Leichte Kontextnotiz unterhalb des Feldes. |
Autogröße (autoresize) | boolean | false | Passt sich der Inhaltshöhe an, eliminiert statische Scrollbalken. |
Maximallänge (maxLength) | number | - | Oberes Limit für eingebare Zeichen. |
Zeichenzähler (showCount) | boolean | false | Rendert einen Live-Zähler (z. B. 12/200). |
Visuelle Variante (variant) | select | "outline" | Rahmen- und Fülltheme. • Optionen: "outline", "surface", "subtle", "flushed". |
Größenstufe (size) | select | "md" | Steuert Padding und Schriftgröße. • Optionen: "xs", "sm", "md", "lg", "xl". |
Breite (width) | select | "full" | Blockbreiten-Verhalten. • Optionen: "full", "fit". |
Ungültig (invalid) | boolean | false | Aktiviert Fehlerrahmen und ungültigen Status. |
Deaktiviert (disabled) | boolean | false | Deaktiviert Interaktion und dimmt das Feld. |
Interaktiv erzwingen (interactive) | boolean | true | Hydriert den Textbereich zum Binden von Events. |
Developer Notes & Accessibility
- Native Formular-Integration: Kompiliert zu nativem
<textarea>mitnameundform, garantiert native Verfügbarkeit ohne JS. - WAI-ARIA-Konformität: Label/Fehler-Beziehungen via
label-Verknüpfung,aria-invalidundaria-describedbykorrekt gebunden, damit Screenreader Validierungsfehler ansagen. - Intelligentes Autosize:
autoresizepasst die Scrollhöhe bei Tastendruck dynamisch an, ohne teure Layout-Reflows.