Zum Hauptinhalt springen
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 Textarea​

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

Readonly Textarea​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="textarea3">Beschreibung</label>
<textarea class="kern-form-input__input" id="textarea3" name="textarea" readonly>Text</textarea>
</div>

Disabled Textarea​

Achtung

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

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="textarea4">Beschreibung</label>
<textarea class="kern-form-input__input" id="textarea4" name="textarea" disabled></textarea>
</div>

Hint Error Textarea​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="textarea6">Beschreibung</label>
<div class="kern-form-input__hint" id="textarea-hint">Hinweistext</div>
<textarea class="kern-form-input__input kern-form-input__input--error" id="textarea6" 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-text">Dieses Feld darf nicht leer sein</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 Eingabefeld, das die mehrzeilige Texteingabe durch Nutzende erlaubt. Die Höhe kann beliebig definiert werden, ist aber immer höher als die eines einzeiligen Eingabefeldes (Input Text). Das Feld kann durch Ziehen der rechten unteren Ecke durch Nutzende verkleinert oder vergrößert werden. Dies erleichtert die Eingabe oder die Lesbarkeit von Text. Wenn die ursprüngliche Länge des Feldes nicht mehr ausreicht, um den eingegebenen Text anzuzeigen, erscheint ein vertikaler Scrollbalken.
Hinsichtlich ihrer Breite können Textfelder angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Benutzerfreundlichkeit beiträgt. Mehr Informationen zu Breite und Höhe der Eingabefelder.
Das Label beschreibt die gewünschte Eingabe. Optional können Hint, das „optional“-Label und die Hilfe verwendet werden. Es kann die Zustände default, hover, focus, readonly, disabled, error und error focus 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