TextArea with Maximum Length
ui5-textareacomponent is used to enter multiple lines of text.
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.
CSS Shadow Parts
ui5-textareaexposes the following CSS Shadow Parts:
- textarea - Used to style the native textarea
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: A disabled component is completely noninteractive.
Note: If set to
true, the CSS
heightproperty is ignored.
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 component so 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 component is 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 component displays 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 component has
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as