TextArea

@ui5/webcomponents
<ui5-textarea>

Basic TextArea

<ui5-textarea placeholder="Type as much text as you wish"></ui5-textarea>
	

TextArea with Maximum Length

<ui5-textarea placeholder="Type some text" maxlength="10" show-exceeded-text></ui5-textarea>
	

Overview

The ui5-textarea component provides large spaces for text entries in the form of multiple rows. It has the functionality of the TextField with the additional functionality for multiline texts.

When empty, it can hold a placeholder similar to a ui5-input. You can define the rows of the ui5-textarea and also determine specific behavior when handling long texts.

ES6 Module Import

import "@ui5/webcomponents/dist/TextArea";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
disabled
boolean
false
Indicates whether the user can interact with the component or not.

Note: Disabled components cannot be focused and they are out of the tab chain.
growing
boolean
false
Enables the ui5-textarea to automatically grow and shrink dynamically with its content.

Note: If set to true, the CSS height property is ignored.
growingMaxLines
growing-max-lines
number
0
Defines the maximum number of lines that the Web Component can grow.
maxlength
number
null
Defines the maximum number of characters that the value can have.
name
string
""
Determines the name with which the ui5-textarea will be submitted in an HTML form.

Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Note: When set, a native input HTML element will be created inside the ui5-textarea so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
placeholder
string
""
Defines a short hint intended to aid the user with data entry when the component has no value.
readonly
boolean
false
Defines whether the ui5-textarea is read-only.

Note: A read-only ui5-textarea is not editable, but still provides visual feedback upon user interaction.
required
boolean
false
Defines whether the ui5-textarea is required.
since v1.0.0-rc.3
rows
number
0
Defines the number of visible text lines for the component.

Notes:
  • If the growing property is enabled, this property defines the minimum rows to be displayed in the textarea.
  • The CSS height property wins over the rows property, if both are set.
showExceededText
show-exceeded-text
boolean
false
Determines whether the characters exceeding the maximum allowed character count are visible in the ui5-textarea.

If set to false, the user is not allowed to enter more characters than what is set in the maxlength property. If set to true the characters exceeding the maxlength value are selected on paste and the counter below the ui5-textarea displays their number.
value
string
""
Defines the value of the Web Component.
valueState
value-state
ValueState
"None"
Defines the value state of the ui5-textarea.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information


Note: If maxlength property is set, the component turns into "Warning" state once the characters exceeds the limit. In this case, only the "Error" state is considered and can be applied.
since v1.0.0-rc.7

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
valueStateMessage
HTMLElement [0..n]
Defines the value state message that will be displayed as pop up under the ui5-textarea.

Note: If not specified, a default text (in the respective language) will be displayed.

Note: The valueStateMessage would be displayed if the ui5-textarea has valueState of type Information, Warning or Error.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the text has changed and the focus leaves the ui5-textarea.
input
Fired when the value of the ui5-textarea changes at each keystroke or when something is pasted.
since v1.0.0-rc.5
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel