Skip to main content

TextArea

<ui5-textarea>

The ui5-textarea component is used to enter multiple rows 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 | undefined
Defaultundefined

valueState​

DescriptionDefines the value state of the component.
Note: If maxlength property is set, the component turns into "Critical" state once the characters exceeds the limit. In this case, only the "Negative" state is considered and can be applied.
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"
Since1.0.0-rc.7

rows​

DescriptionDefines the number of visible text rows 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

growingMaxRows​

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

name​

DescriptionDetermines the name by which the component will be identified upon submission in an HTML form.
Note: This property is only applicable within the context of an HTML Form element.
Typestring | undefined
Defaultundefined

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the textarea.
Typestring | undefined
Defaultundefined
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, Critical or Negative.
TypeArray<HTMLElement>
Since1.0.0-rc.7

Events​

change​

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

input​

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

select​

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

scroll​

DescriptionFired when textarea is scrolled.
TypeCustomEvent
Since1.23.0
BubblesYes
CancelableNo

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.