Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Input Textarea

Synonyme: Textfeld, Textarea, multi-line text input, mehrzeiliges Eingabefeld
Ähnliche Komponenten: Input Text, Input Date, Input E-Mail, Input Password

Kurzbeschreibung​

Die Textarea ermöglicht eine Eingabe von langen Textinhalten durch Nutzende.

Beispiele​

Default​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea" name="textarea"></textarea>
</div>

Readonly​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea1">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea1" name="textarea1" value="Der Marktstand wird an der Ecke Kirchplatz und Jakobistraße aufgebaut, dort befinden sich auch die Stromanschlüsse." readonly>Text</textarea>
</div>

Disabled​

Achtung

Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea2">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea2" name="textarea2" value="Der Marktstand wird an der Ecke Kirchplatz und Jakobistraße aufgebaut, dort befinden sich auch die Stromanschlüsse." disabled></textarea>
</div>

Optional​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea">Ortsbeschreibung <span class="kern-label__optional">- Optional</span></label>
<textarea class="kern-form-input__input" id="textarea" name="textarea"></textarea>
</div>

Hinweistext und Fehlermeldung​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="textarea3">Ortsbeschreibung</label>
<div class="kern-hint" id="textarea-hint">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<textarea class="kern-form-input__input kern-form-input__input--error" id="textarea3" name="textarea" aria-describedby="textarea-hint textarea-error"></textarea>
<p class="kern-error" id="textarea-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>

Beschreibung​

Hinweis

Für Textarea gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.

Die Textarea ist ein Eingabefeldes, das die mehrzeilige Texteingabe durch Nutzende ermöglicht. Die Höhe kann beliebig definiert werden, ist jedoch immer größer als die eines einzeiligen Eingabefeldes (<input type="text">). Hinsichtlich der Breite kann auch das Input Textarea angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Benutzerfreundlichkeit beiträgt. Das Feld kann durch Ziehen an der rechten unteren Ecke von Nutzenden vergrößert oder verkleinert werden. Dies erleichtert die Eingabe und die Lesbarkeit längerer Texte. Wenn die ursprüngliche Höhe des Feldes nicht mehr ausreicht, um den gesamten Text anzuzeigen, erscheint ein vertikaler Scrollbalken.
Das Label des Eingabefeldes sollte kurz, prägnant und eindeutig auf die erwartete Eingabe hinweisen. Dort kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Ein ergänzender Hinweistext (Hint) kann zusätzlich Informationen zum Format, zur Bedeutung oder zum Hintergrund der Eingabe geben und unterstützt so die Nutzerfreundlichkeit. Input Textarea unterstützen die Eingabevalidierung, um sicherzustellen, dass die eingegebenen Daten korrekt sind. Fehlermeldungen und visuelle Hinweise informieren die Nutzenden über notwendige Korrekturen.Bei einer ungültigen Eingabe wird eine Fehlermeldung unterhalb des Feldes angezeigt. Input Textarea kann alle unter Input beschriebenen Zustände annehmen.

Verwendungsregeln​

Verwende die Textarea nur dann, wenn Nutzende mehrzeiligen Text oder Absätze eingeben müssen. Sonst nutze das Input Text. Stelle die Höhe einer Textarea proportional zu der Textmenge ein, die Nutzende eingeben sollen. Offene Fragen sind für Nutzende oft schwerer zu beantworten. Prüfe, ob eine komplexe Fragestellung bzw. deren Beantwortung in eine Reihe einfacher Antworten aufteilbar ist, z. B. indem Nutzende mit Hilfe von Radios aus Optionen auswählen können.

Dos und Don’ts​

  • Erlaube die copy & paste-Funktion.
  • Erlaube Nutzenden, das Feld zu vergrößern, wenn lange Texteingaben zu erwarten sind.
  • Siehe auch allgemeine Dos und Don'ts für Input

Barrierefreiheit​

  • Eine Textarea sollte nur dann verwendet werden, wenn die Notwendigkeit besteht, mehrzeiligen Text oder Absätze einzugeben. Die Zugänglichkeit ist für Screenreader-Nutzende schlechter.

Siehe auch: BFIT Handreichungen und MagentaA11y

Inhaltsverzeichnis