Skip to main content

Textarea

Die Komponente Textarea stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.

Konstruktion

Code

<kol-textarea
_resize="none"
_rows="5"
_value="
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet."
></kol-textarea>

Beispiel

Verwendung

Verwenden Sie die Textarea-Komponente wenn die Eingabe von größeren Textmengen erforderlich ist, z.B. bei der Erfassung eines Anliegens innerhalb eines Formulars. Mit Hilfe des Attributs _rows kann die Höhe der Textarea in Zeilen bestimmt werden. Über das Attribut _resize kann zusätzlich festgelegt werden ob und in welche Richtung die Textarea vergrößert werden kann. Der Wert none sperrt die Textarea gegen Größenänderungen.

Barrierefreiheit

Tastatursteuerung

TasteFunktion
TabFokussiert die Textarea.
Pfeil-TastenKönnen für die Navigation im Inhalt der fokussierten Textarea verwendet werden.

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyGibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.string | undefinedundefined
_adjustHeight_adjust-heightPasst die Höhe des Eingabefeldes automatisch an den Füllstand an.boolean | undefinedfalse
_alert_alertGibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.boolean | undefinedtrue
_disabled_disabledSetzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.boolean | undefinedundefined
_error_errorGibt den Text für eine Fehlermeldung an.string | undefinedundefined
_hasCounter_has-counterAktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.boolean | undefinedundefined
_hideLabel_hide-labelVersteckt das sichtbare Label des Elements.boolean | undefinedundefined
_hint_hintGibt den Hinweistext an.string | undefined''
_id_idGibt die technische ID des Eingabefeldes an.string | undefinedundefined
_maxLength_max-lengthSetzt die maximale Zeichenanzahl.number | undefinedundefined
_name_nameGibt den technischen Namen des Eingabefeldes an.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefinedundefined
_placeholder_placeholderGibt den Platzhalter des Eingabefeldes an, wenn es leer ist.string | undefinedundefined
_readOnly_read-onlySetzt das Eingabefeld in den schreibgeschützten Modus.boolean | undefinedundefined
_required_requiredMacht das Eingabeelement zu einem Pflichtfeld.boolean | undefinedundefined
_resize_resizeGibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)"both" | "horizontal" | "none" | "vertical" | undefined'vertical'
_rows_rowsGibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.number | undefinedundefined
_tabIndex_tab-indexGibt an, welchen Tab-Index dieses Input hat.number | undefinedundefined
_touched_touchedGibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.boolean | undefinedfalse
_value_valueGibt den Wert des Eingabefeldes an.string | undefinedundefined

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

Dependencies

Depends on

  • kol-input

Graph


Live-Editor

Beispiele

Einfach

Automatische Zeilenanpassung

Disabled

Placeholder

Readonly

Resizable Textarea

Zeilenlänge