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​

accessibleDescription​

DescriptionDefines the accessible description of the component.
Typestring | undefined
Defaultundefined
Since2.16.0

accessibleDescriptionRef​

DescriptionReceives id(or many ids) of the elements that describe the textarea.
Typestring | undefined
Defaultundefined
Since2.16.0

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

counterMode​

DescriptionDetermines when the character counter of the component is displayed.
Available options are:
- None - The counter is never shown and maxlength acts as a hard cap.
- Always - The counter is always visible below the component.
- Auto - The counter is shown only when the component is focused, when the character limit is exceeded, or when valueState is Critical or Negative. Space is always reserved to prevent layout shifts.
Note: When set to a value other than None, this property takes precedence over the deprecated showExceededText property.
Type"Always" | "Auto" | "None" (value descriptions in: TextAreaCounterMode)
Default"None"
Since2.28.0

disabled​

DescriptionIndicates whether the user can interact with the component or not.
Note: A disabled component is completely noninteractive.
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

maxlength​

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

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

placeholder​

DescriptionDefines a short hint intended to aid the user with data entry when the component has no value.
Typestring | undefined
Defaultundefined

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

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

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
DeprecatedUse counterMode="Always" instead.

value​

DescriptionDefines the value of the component.
Typestring
Default""

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"Critical" | "Information" | "Negative" | "None" | "Positive"
Default"None"
Since1.0.0-rc.7

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<TextAreaInputEventDetail>
ParametersescapePressed: boolean
Indicates whether the Escape key was pressed, which triggers a revert to the previous value
Since1.0.0-rc.5
BubblesYes
CancelableYes - via preventDefault()

scroll​

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

select​

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

Methods​

No methods available for this component.

CSS Parts​

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

NameDescription
textareaUsed to style the native textarea

CSS Custom States​

No CSS custom states available for this component.

More Samples​

Growing​

The TextArea can grow when entering new lines.

Max Length​

You can use the maxlength and counterMode properties to define characters limit and to indicates how many characters are remaining before the limit or exceeding after the limit. Set counterMode to "Always" to keep the counter permanently visible.

Exceeded Text​

Set counterMode to "Auto" to show the character counter only when the TextArea is focused or when the character limit is exceeded. The counter is also always visible when valueState is "Critical" or "Negative". Space for the counter is always reserved to avoid layout shifts.

The deprecated showExceededText Boolean still works and maps to counterMode "Always".

The application can control threshold-based coloring by setting valueState based on character count.

States​

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