Textarea

Synonyms: Multi-line input field, text area, text input field

A Textarea is a multi-line input field that allows users to enter longer texts with line breaks. Unlike single-line input fields, the textarea provides enough space for extensive text content such as descriptions, comments, or structured information. The component supports various configuration options such as resizing, character limits, accessibility, and automatic height adjustment.

Example

Standard textarea with label and placeholder text:

Message

<KolTextarea _hint="Additional hints for the input field" _label="Description" _placeholder="Please enter your description..." _rows={4} />

Accessibility

The Textarea component was developed with a focus on accessibility and supports various assistive technologies:

• Label requirement: Every textarea must have a visible label via the _label attribute. This ensures that screen reader users understand the purpose of the input field.
• Hint texts: With _hint, additional information can be provided that is accessible to all users and read aloud by screen readers.
• Error messages: Invalid input can be provided with meaningful error messages via the _msg attribute, which are recognized and read aloud by assistive technologies.
• Character counter: When the character counter is enabled (_has-counter), the status is updated with a 500ms delay to avoid interrupting screen readers with every keystroke. Additionally, a hidden text visible only to assistive technologies is displayed (e.g., "You can enter up to 100 characters").
• Focus management: The textarea is fully operable via keyboard and provides clear focus indicators.
• Required fields: Fields marked with _required are correctly communicated to assistive technologies.

Links and references

Usage

Keyboard controls

The textarea supports the following keyboard shortcuts:

Key	Function
Tab	Focuses the textarea or switches to the next interactive element.
Shift + Tab	Switches to the previous interactive element.
Arrow keys	Navigation within the text content of the focused textarea.
Home	Jumps to the beginning of the current line.
End	Jumps to the end of the current line.
Ctrl + A	Selects all text in the textarea.
Enter	Inserts a line break (unlike single-line input fields).

Best Practices / Recommendations

• Choose a sensible height: Start with a few rows (e.g., _rows="4") and allow resizing via _resize if needed, but avoid horizontal scrolling.
• Sensible maximum length: Set a technically justified maximum character length and make it transparent with _has-counter and _max-length. For softer limits, use _max-length-behavior="soft".
• Provide help texts: Provide format specifications or hints via the _hint attribute before input, not only after an error.
• Leave control to the user: Do not force capitalization. Users retain control over the entered text.
• Transparency with truncation: Never truncate or modify content without notice. Communicate clearly when truncation occurs.
• Choose the right component: For short, single-line input, use the instead. Textareas are intended for multi-line content.
• Meaningful labels: Use clear and precise labels that clearly communicate the purpose of the input field.
• Error messages: For validation errors, provide specific, understandable hints via the _msg attribute.

Use cases

• Comments and feedback: Capturing user comments, feedback, or reviews.
• Descriptions: Entering product, article, or person descriptions.
• Form fields: Capturing requests, inquiries, or justifications in forms.
• Structured data: Entering multi-line addresses, notes, or instructions.
• Messages: Composing emails, messages, or communications.
• Documentation: Entering longer texts for documentation or content management systems.

Construction / Technology

Playground

Test the various properties of the Textarea component:

<KolTextarea _hint="Hint text" _label="Description" _placeholder="Please enter a description..." _rows={4} />

Functionalities

Simple Textarea

Standard textarea without special configuration:

<KolTextarea _label="Description" />

Automatic height adjustment

The textarea automatically adjusts its height to the content:

<KolTextarea _adjustHeight={true} _label="Description" _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." />

Form attributes

Standard attributes for forms:

Message

<KolTextarea _label="Description" />

Available attributes:

• _msg: Error messages or validation hints
• _hint: Additional hints for the input
• _disabled: Disables the input field (use with justification!)
• _readOnly: Prevents editing of the field
• _required: Marks required fields
• _hideLabel: Visually hides the label (remains visible to assistive technologies)

Placeholder

The placeholder text is displayed when the input field is empty:

<KolTextarea _label="Description" _placeholder="Please enter a description..." />

Note: The placeholder should only serve as supplementary help and should not contain mandatory information, as the text disappears when typing.

Read-only mode

The textarea is read-only but not editable:

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

Resize

The textarea can be resized using the _resize attribute:

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

Available values:

• vertical: Only vertically resizable (default)
• horizontal: Only horizontally resizable
• both: Resizable in both directions
• none: No resizing possible

Number of rows

The initial height of the textarea can be specified in rows using the _rows attribute:

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

Character limit and character counter

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

<KolTextarea _hasCounter={true} _label="Description" _maxLength={100} _rows={3} _value="Initial text" />

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

| | _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 characters
3	true	100	(empty) or hard	n/100 characters
4	true	100	soft	50 characters still available (or 5 characters too many)
—	— (no counter)

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

Accessibility of the character counter

• The counter updates with a delay of 500ms so that screen reader events are bundled and do not interrupt typing.
• For screen readers, a hidden text visible only to assistive technologies is additionally displayed, such as: "You can enter up to 100 characters."

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).

API

Overview

The Textarea component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.

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
_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" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _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

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

focus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

getValue() => Promise<string | undefined>

Returns the current value.

Returns

Type: Promise<string | undefined>

Slots

Slot	Description
	The label of the input field.

---

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 input	Current value of the input field
change	Input has been completed	Current value of the input field