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-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_adjustHeight_adjust-heightAdjusts the height of the element to its content.boolean | undefinedfalse
_alert_alertDefines whether the screen-readers should read out the notification.boolean | undefinedtrue
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_error_error[DEPRECATED] Will be removed in v3. Use msg instead.

Defines the error message text.
string | undefinedundefined
_hasCounter_has-counterShows the character count on the lower border of the input.boolean | undefinedfalse
_hideError_hide-errorHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hideLabel_hide-labelHides 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 | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines 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.stringundefined
_maxLength_max-lengthDefines the maximum number of input characters.number | undefinedundefined
_msg--Defines the properties for a message rendered as Alert component.undefined | {} & { _level?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: "error" | "warning" | "info" | "success" | "default" | undefined; _variant?: "card" | "msg" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }undefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefinedundefined
_placeholder_placeholderDefines the placeholder for input field. To be shown when there's no value.string | undefinedundefined
_readOnly_read-onlyMakes the input element read only.boolean | undefinedfalse
_required_requiredMakes the input element required.boolean | undefinedfalse
_resize_resizeDefines 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)"both" | "horizontal" | "none" | "vertical" | undefined'vertical'
_rows_rowsDefines how many rows of text should be visible at the same time.number | undefinedundefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_value_valueDefines the value of the input.string | undefinedundefined

Methods

getValue

getValue() => Promise<string | undefined>

Returns

Type: Promise<string | undefined>

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

Live-Editor

Beispiele

Einfach

Automatische Zeilenanpassung

Disabled

Placeholder

Readonly

Resizable Textarea

Zeilenlänge