Textarea

Synonyme: Mehrzeiliges Eingabefeld, Textbereich, Texteingabefeld

Eine Textarea ist ein mehrzeiliges Eingabefeld, das es Nutzern ermöglicht, längere Texte mit Zeilenumbrüchen einzugeben. Im Gegensatz zu einzeiligen Eingabefeldern bietet die Textarea ausreichend Platz für umfangreiche Textinhalte wie Beschreibungen, Kommentare oder strukturierte Informationen. Die Komponente unterstützt verschiedene Konfigurationsoptionen wie Größenanpassung, Zeichenbegrenzung, Barrierefreiheit und automatische Höhenanpassung.

Beispiel

Standard-Textarea mit Beschriftung und Platzhaltertext:

<KolTextarea _hint="Ergänzende Hinweise zum Eingabefeld" _label="Beschreibung" _placeholder="Bitte geben Sie Ihre Beschreibung ein..." _rows={4} />

Barrierefreiheit

Die Textarea-Komponente wurde mit Fokus auf Barrierefreiheit entwickelt und unterstützt verschiedene assistive Technologien:

• Label-Pflicht: Jede Textarea muss über das Attribut _label eine sichtbare Beschriftung erhalten. Dies gewährleistet, dass Screenreader-Nutzer verstehen, welchen Zweck das Eingabefeld erfüllt.
• Hinweistexte: Mit _hint können zusätzliche Informationen bereitgestellt werden, die für alle Nutzer zugänglich sind und von Screenreadern vorgelesen werden.
• Fehlermeldungen: Fehlerhafte Eingaben können über das Attribut _msg mit aussagekräftigen Fehlermeldungen versehen werden, die von assistiven Technologien erkannt und vorgelesen werden.
• Zeichenzähler: Bei aktiviertem Zeichenzähler (_has-counter) wird der Status mit einer Verzögerung von 500 ms aktualisiert, um Screenreader nicht bei jeder Eingabe zu unterbrechen. Zusätzlich wird ein versteckter, nur für assistive Technologien sichtbarer Text eingeblendet (z.B. "Sie können bis zu 100 Zeichen eingeben").
• Fokusmanagement: Die Textarea ist vollständig über die Tastatur bedienbar und bietet klare Fokusindikatoren.
• Pflichtfelder: Mit _required gekennzeichnete Felder werden korrekt an assistive Technologien kommuniziert.

Links und Referenzen

Nutzung

Tastatursteuerung

Die Textarea unterstützt folgende Tastenkombinationen:

Taste	Funktion
Tab	Fokussiert die Textarea oder wechselt zum nächsten interaktiven Element.
Shift + Tab	Wechselt zum vorherigen interaktiven Element.
Pfeil-Tasten	Navigation innerhalb des Textinhalts der fokussierten Textarea.
Pos1	Springt zum Anfang der aktuellen Zeile.
Ende	Springt zum Ende der aktuellen Zeile.
Strg + A	Markiert den gesamten Text in der Textarea.
Enter	Fügt einen Zeilenumbruch ein (im Gegensatz zu einzeiligen Eingabefeldern).

Best Practices / Empfehlungen

• Höhe sinnvoll wählen: Beginnen Sie mit wenigen Zeilen (z.B. _rows="4") und erlauben Sie bei Bedarf die Größenanpassung über _resize, aber vermeiden Sie horizontales Scrollen.
• Sinnvolle maximale Länge: Legen Sie eine fachlich begründete maximale Zeichenlänge fest und machen Sie diese mit _has-counter und _max-length transparent. Für weichere Limits nutzen Sie _max-length-behavior="soft".
• Hilfetexte bereitstellen: Geben Sie Formatvorgaben oder Hinweise über das Attribut _hint vor der Eingabe an, nicht erst nach einem Fehler.
• Kontrolle beim Nutzer lassen: Erzwingen Sie keine Groß-/Kleinschreibung. Nutzer behalten die Kontrolle über den eingegebenen Text.
• Transparenz bei Trunkierung: Schneiden Sie Inhalte nie vorab ab oder verändern Sie diese ohne Hinweis. Bei Trunkierung klar kommunizieren.
• Richtige Komponente wählen: Für kurze, einzeilige Eingaben verwenden Sie besser die . Textareas sind für mehrzeilige Inhalte gedacht.
• Aussagekräftige Labels: Verwenden Sie klare und präzise Beschriftungen, die den Zweck des Eingabefelds deutlich machen.
• Fehlermeldungen: Bei Validierungsfehlern geben Sie konkrete, verständliche Hinweise über das Attribut _msg.

Anwendungsfälle

• Kommentare und Feedback: Erfassen von Nutzer-Kommentaren, Feedback oder Bewertungen.
• Beschreibungen: Eingabe von Produkt-, Artikel- oder Personenbeschreibungen.
• Formularfelder: Erfassung von Anliegen, Anfragen oder Begründungen in Formularen.
• Strukturierte Daten: Eingabe von Adressen mit mehreren Zeilen, Notizen oder Anweisungen.
• Nachrichten: Verfassen von E-Mails, Nachrichten oder Mitteilungen.
• Dokumentation: Eingabe von längeren Texten für Dokumentations- oder Content-Management-Systeme.

Konstruktion / Technik

Playground

Testen Sie die verschiedenen Eigenschaften der Textarea-Komponente:

<KolTextarea _hint="Hinweistext" _label="Beschreibung" _placeholder="Bitte geben Sie eine Beschreibung ein..." _rows={4} />

Funktionalitäten

Einfache Textarea

Standard-Textarea ohne spezielle Konfiguration:

<KolTextarea _label="Beschreibung" />

Automatische Höhenanpassung

Die Textarea passt ihre Höhe automatisch an den Inhalt an:

<KolTextarea _adjustHeight={true} _label="Beschreibung" _value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat." />

Formularattribute

Standard-Attribute für Formulare:

<KolTextarea _label="Beschreibung" />

Verfügbare Attribute:

• _msg: Fehlermeldungen oder Validierungshinweise
• _hint: Ergänzende Hinweise zur Eingabe
• _disabled: Deaktiviert das Eingabefeld (mit Begründung verwenden!)
• _readOnly: Verhindert die Bearbeitung des Feldes
• _required: Kennzeichnet Pflichtfelder

Placeholder

Der Placeholder-Text wird angezeigt, wenn das Eingabefeld leer ist:

<KolTextarea _label="Beschreibung" _placeholder="Bitte geben Sie eine Beschreibung ein..." />

Hinweis: Der Placeholder sollte nur als ergänzende Hilfe dienen und keine Pflichtinformationen enthalten, da der Text beim Eintippen verschwindet.

Nur-Lesen-Modus

Die Textarea ist nur lesbar, aber nicht editierbar:

<KolTextarea _label="Beschreibung" _readOnly={true} />

Größenanpassung (Resize)

Die Textarea kann über das Attribut _resize in ihrer Größe angepasst werden:

<KolTextarea _label="Beschreibung" _resize="vertical" />

Verfügbare Werte:

• vertical: Nur vertikal vergrößerbar (Standard)
• horizontal: Nur horizontal vergrößerbar
• both: In beide Richtungen vergrößerbar
• none: Keine Größenanpassung möglich

Zeilenanzahl

Die anfängliche Höhe der Textarea kann über das Attribut _rows in Zeilen angegeben werden:

<KolTextarea _label="Beschreibung" _rows={6} />

Zeichenbegrenzung und Zeichenzähler

Mit den Attributen _max-length, _max-length-behavior und _has-counter lässt sich die Eingabelänge flexibel begrenzen und gleichzeitig visuelles Feedback geben:

<KolTextarea _hasCounter={true} _label="Beschreibung" _maxLength={100} _rows={3} _value="Initialer Text" />

Attribute

Attribut	Typ	Standard	Beschreibung
_has-counter	boolean	false	Globaler Schalter für den Zeichenzähler. Nur wenn dieses Attribut gesetzt (= true) ist, wird überhaupt ein Zähler ausgegeben.
_max-length	number	—	Maximale Anzahl erlaubter Zeichen. Wirksam nur, wenn _has-counter aktiv ist.
_max-length-behavior	"hard" | "soft"	"hard"	Legt fest, wie die Grenze behandelt wird, falls _max-length gesetzt ist: - hard: Setzt zusätzlich das native maxlength‑Attribut und verhindert weitere Eingaben. - soft: Lässt weitere Eingaben zu; der Zähler zeigt verbleibende oder überschrittene Zeichen an.

Ausgabevarianten

Fall	_has-counter	_max-length	_max-length-behavior	Sichtbarer Text
1	(leer) oder false	—	—	— (kein Zähler)
2	true	(leer)	—	n Zeichen
3	true	100	(leer) oder hard	n/100 Zeichen
4	true	100	soft	noch 50 Zeichen verfügbar (bzw. 5 Zeichen zu viel)

Hinweis: Wird _max-length-behavior="soft" verwendet, wird das native maxlength-Attribut nicht gesetzt – das Eingabefeld wird also nicht hart begrenzt.

Barrierefreiheit des Zeichenzählers

• Der Zähler aktualisiert sich mit einer Verzögerung von 500 ms, damit Screenreader-Ereignisse gebündelt werden und das Tippen nicht unterbrechen.
• Für Screenreader wird zusätzlich ein versteckter, nur für assistive Technologien sichtbarer Text eingeblendet, etwa: „Sie können bis zu 100 Zeichen eingeben."

Zusammenfassung

• Ohne _has-counter gibt es nie einen Zähler.
• Mit _has-counter und ohne _max-length wird nur die aktuell eingegebene Zeichenzahl angezeigt.
• Mit _has-counter und _max-length bestimmt _max-length-behavior, ob die Grenze hart (hard) oder weich (soft) umgesetzt wird.

API

Properties

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Defines the key combination that can be used to trigger or focus the component's interactive element.	string | undefined	undefined
_adjustHeight	_adjust-height	Adjusts the height of the element to its content.	boolean | undefined	false
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_hasCounter	_has-counter	Shows a character counter for the input element.	boolean | undefined	false
_hideLabel	_hide-label	Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.	boolean | undefined	false
_hideMsg	_hide-msg	Hides the error message but leaves it in the DOM for the input's aria-describedby.	boolean | undefined	false
_hint	_hint	Defines the hint text.	string | undefined	''
_icons	_icons	Defines the icon classnames (e.g. _icons="fa-solid fa-user").	string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }	undefined
_id	_id	[DEPRECATED] Will be removed in the next major version. Defines the internal ID of the primary component element.	string | undefined	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.	string	undefined
_maxLength	_max-length	Defines the maximum number of input characters.	number | undefined	undefined
_maxLengthBehavior	_max-length-behavior	Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.	"hard" | "soft" | undefined	'hard'
_msg	_msg	Defines the properties for a message rendered as Alert component.	Omit<AlertProps, "_on" | "_hasCloser" | "_label" | "_level" | "_variant"> & { _description: string; } | string | undefined	undefined
_name	_name	Defines the technical name of an input field.	string | undefined	undefined
_on	--	Gibt die EventCallback-Funktionen für das Input-Event an.	InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined	undefined
_placeholder	_placeholder	Defines the placeholder for input field. To be shown when there's no value.	string | undefined	undefined
_readOnly	_read-only	Makes the input element read only.	boolean | undefined	false
_required	_required	Makes the input element required.	boolean | undefined	false
_resize	_resize	Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties vertical (default) and none.	"none" | "vertical" | undefined	'vertical'
_rows	_rows	Maximum number of visible rows of the element.	number | undefined	undefined
_shortKey	_short-key	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	string | undefined	undefined
_spellCheck	_spell-check	Defines whether the browser should check the spelling and grammar.	boolean | undefined	undefined
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'
_touched	_touched	Shows if the input was touched by a user.	boolean | undefined	false
_value	_value	Defines the value of the element.	string | undefined	undefined

Methods

focus

focus() => Promise<void | undefined>

Sets focus on the internal element.

Returns

Type: Promise<void | undefined>

getValue() => Promise<string | undefined>

Returns the current value.

Returns

Type: Promise<string | undefined>

Slots

Slot	Description
	Die Beschriftung des Eingabefeldes.

---

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Eingabefeld wird angeklickt	-
focus	Eingabefeld wird fokussiert	-
blur	Eingabefeld verliert Fokus	-
input	Wert wird durch Eingabe geändert	Aktueller Wert des Eingabefelds
change	Eingabe wurde abgeschlossen	Aktueller Wert des Eingabefelds

Links und Referenzen