Skip to main content

TextArea

The ui5-textarea component 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-textarea and also determine specific behavior when handling long texts.

ES6 Module Import​

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

Basic Sample​

Properties​

value​

DescriptionDefines the value of the component.
Typestring
Default""

disabled​

DescriptionIndicates whether the user can interact with the component or not.
Note: A disabled component is completely noninteractive.
Typeboolean
Defaultfalse

readonly​

DescriptionDefines whether the component is read-only.
Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
Typeboolean
Defaultfalse

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse
Since1.0.0-rc.3

placeholder​

DescriptionDefines a short hint intended to aid the user with data entry when the component has no value.
Typestring
Default""

valueState​

DescriptionDefines the value state of the component.
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.
Type"None" | "Success" | "Warning" | "Error" | "Information"
Default"None"
Since1.0.0-rc.7

rows​

DescriptionDefines 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.
Typenumber
Default0

maxlength​

DescriptionDefines the maximum number of characters that the value can have.
Typenumber | undefined
Defaultundefined

showExceededText​

DescriptionDetermines whether the characters exceeding the maximum allowed character count are visible in the component.
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 component displays their number.
Typeboolean
Defaultfalse

growing​

DescriptionEnables the component to automatically grow and shrink dynamically with its content.
Typeboolean
Defaultfalse

growingMaxLines​

DescriptionDefines the maximum number of lines that the component can grow.
Typenumber
Default0

name​

DescriptionDetermines the name with which the component 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 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.
Typestring
Default""

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring
Default""
Since1.0.0-rc.15

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the textarea.
Typestring
Default""
Since1.0.0-rc.15

Slots​

valueStateMessage​

DescriptionDefines the value state message that will be displayed as pop up under the component. The value state message slot should contain only one root element.
Note: If not specified, a default text (in the respective language) will be displayed.
Note: The valueStateMessage would be displayed if the component has valueState of type Information, Warning or Error.
TypeArray<HTMLElement>
Since1.0.0-rc.7

Events​

change​

DescriptionFired when the text has changed and the focus leaves the component.
TypeCustomEvent

input​

DescriptionFired when the value of the component changes at each keystroke or when something is pasted.
TypeCustomEvent
Since1.0.0-rc.5

select​

DescriptionFired when some text has been selected.
TypeCustomEvent
Since1.23.0

scroll​

DescriptionFired when textarea is scrolled.
TypeCustomEvent
Since1.23.0

Methods​

No methods available for this component.

CSS Parts​

NameDescription
textareaUsed to style the native textarea

More Samples​

Growing​

The TextArea can grow when entering new lines.

Max Length​

You can use the maxlength and showExceededText properties to define characters limit and to indicates how many characters are remaining before the limit or exceeding after the limit.

States​

TextArea supports several semantic value states, readonly, disabled, etc.