TextArea with Maximum Length
ui5-textareacomponent provides large spaces for text entries in the form of multiple rows. It has the functionality of the
TextFieldwith 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-textareaand also determine specific behavior when handling long texts.
ES6 Module Import
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.
Note: Disabled components cannot be focused and they are out of the tab chain.
ui5-textareato automatically grow and shrink dynamically with its content.
Note: If set to
true, the CSS
heightproperty is ignored.
ui5-textareawill be submitted in an HTML form.
Important: For the
nameproperty to have effect, you must add the following import to your project:
Note: When set, a native
inputHTML element will be created inside the
ui5-textareaso that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
Note: A read-only
ui5-textareais not editable, but still provides visual feedback upon user interaction.
- If the
growingproperty is enabled, this property defines the minimum rows to be displayed in the textarea.
- The CSS
heightproperty wins over the
rowsproperty, if both are set.
If set to
false, the user is not allowed to enter more characters than what is set in the
maxlengthproperty. If set to
truethe characters exceeding the
maxlengthvalue are selected on paste and the counter below the
ui5-textareadisplays their number.
Available options are:
maxlengthproperty 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.
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
Note: If not specified, a default text (in the respective language) will be displayed.
valueStateMessagewould be displayed if the
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
ui5-textareachanges at each keystroke or when something is pasted.