Textarea

The Textarea component provides a larger input field for content. In contrast to the , extensive content can also be entered here, which can also contain line breaks.

Construction

Code

<kol-textarea
 _label="Beschreibung"
 _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>

Events

For the handling of events or callbacks, see .

Event	trigger	Value
`click`	Input field is clicked	-
`focus`	Input field is focused	-
`blur`	Input field loses focus	-
`input`	Value is changed by entering	Current value of the input field
`change`	Entry has been completed	Current value of the input field

Example

<kol-textarea
 _label="Beschreibung"
 _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>

Usage

Use the Textarea component if the entry of larger amounts of text is required, e.g. when entering a request within a form. The height of the text area in lines can be determined using the _rows attribute. The _resize attribute can also be used to specify whether and in which direction the text area can be enlarged. The value none locks the text area against size changes.

Accessibility

Keyboard controls

button	Function
`Tab`	Focuses the text area.
`arrow keys`	Can be used to navigate the content of the focused text area.

Character limit and character counter

With the three attributes _max-length, _max-length-behavior and _has-counter, the input length can be flexibly limited and at the same time provide visual feedback.

Attributes

Attribute	Type	Default	Description
`_has-counter`	`boolean`	`false`	Global switch for the character counter. Only if this attribute is set (= true) will a counter be output.
`_max-length`	`number`	—	Maximum number of characters allowed. Effective only if `_has-counter` is active.
`_max-length-behavior`	`"hard" \| "soft"`	`"hard"`	Specifies how the limit is handled if `_max-length` is set: - hard: Additionally sets the native `maxlength` attribute and prevents further input. - soft: Allows further input; the counter shows remaining or exceeded characters.

Output variants

case	`_has-counter`	`_max-length`	`_max-length-behavior`	Visible text
1	(empty) or `false`	—	—	— (no counter)
2	`true`	(empty)	—	`n character`
3	`true`	5	(empty) or `hard`	`n/5 characters`
4	`true`	5	`soft`	`3 characters still available` (or `3 characters too many`)

If _max-length-behavior="soft" is used, the native maxlength attribute is not set - so the input field is not hard-limited.

Accessibility

The counter updates with a 500ms delay so that screen reader events are concentrated and do not interrupt typing.
For screen readers, a hidden text that is only visible to assistive technologies is also displayed, such as: “You can enter up to 10 characters.”

Examples

<!-- Nur Zähler -->
<kol-textarea _label="Beschreibung" _has-counter></kol-textarea>

<!-- Harte Begrenzung auf 5 Zeichen -->
<kol-textarea _label="Beschreibung" _has-counter _max-length="5"></kol-textarea>

<!-- Weiche Begrenzung auf 5 Zeichen -->
<kol-textarea
 _label="Beschreibung"
 _has-counter
 _max-length="5"
 _max-length-behavior="soft">
</kol-textarea>

Summary

Without _has-counter there is never a counter.
With _has-counter and without _max-length only the currently entered number of characters is displayed.
With _has-counter and _max-length, _max-length-behavior determines whether the limit is implemented hard (hard) or softly (soft).

Links and references

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

getValue

getValue() => Promise<string | undefined>

Returns the current value.

Returns

Type: Promise<string | undefined>

`kolFocus() => Promise<void>`

Sets focus on the internal element.

Returns

Type: Promise<void>

Slots

Slot	Description
	Die Beschriftung des Eingabefeldes.

Textarea

Construction

Code

Events

Example

Usage

Accessibility

Keyboard controls

Character limit and character counter

Attributes

Output variants

Accessibility

Examples

Summary

Links and references

Properties

Methods

getValue

Returns

`kolFocus() => Promise<void>`

Returns

Slots

View example

Live editor

Examples

Simply

Automatic line adjustment

Disabled

Placeholders

Readonly

Resizable text area

Line length

Construction​

Code​

Events​

Example​

Usage​

Accessibility​

Keyboard controls​

Character limit and character counter​

Attributes​

Output variants​

Accessibility​

Examples​

Summary​

Links and references​

Properties​

Methods​

getValue​

Returns​

kolFocus() => Promise<void>​

Returns​

Slots​

View example

Live editor​

Examples​

Simply​

Automatic line adjustment​

Disabled​

Placeholders​

Readonly​

Resizable text area​

Line length​

Construction

Code

Events

Example

Usage

Accessibility

Keyboard controls

Character limit and character counter

Attributes

Output variants

Accessibility

Examples

Summary

Links and references

Properties

Methods

getValue

Returns

`kolFocus() => Promise<void>`

Returns

Slots

Live editor

Examples

Simply

Automatic line adjustment

Disabled

Placeholders

Readonly

Resizable text area

Line length