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

Description	Defines the value of the component.
Type	string
Default	""

disabled

Description	Indicates whether the user can interact with the component or not. Note: A disabled component is completely noninteractive.
Type	boolean
Default	false

readonly

Description	Defines whether the component is read-only. Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
Type	boolean
Default	false

required

Description	Defines whether the component is required.
Type	boolean
Default	false
Since	1.0.0-rc.3

placeholder

Description	Defines a short hint intended to aid the user with data entry when the component has no value.
Type	string | undefined
Default	undefined

valueState

Description	Defines 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"
Since	1.0.0-rc.7

rows

Description	Defines 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.
Type	number
Default	0

maxlength

Description	Defines the maximum number of characters that the value can have.
Type	number | undefined
Default	undefined

showExceededText

Description	Determines 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.
Type	boolean
Default	false

growing

Description	Enables the component to automatically grow and shrink dynamically with its content.
Type	boolean
Default	false

growingMaxRows

Description	Defines the maximum number of rows that the component can grow.
Type	number
Default	0

name

Description	Determines 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.
Type	string | undefined
Default	undefined

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the textarea.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

Slots

valueStateMessage

Description	Defines 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.
Type	Array<HTMLElement>
Since	1.0.0-rc.7

Events

change

Description	Fired when the text has changed and the focus leaves the component.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

input

Description	Fired when the value of the component changes at each keystroke or when something is pasted.
Type	CustomEvent<TextAreaInputEventDetail>
Parameters	escapePressed: boolean Indicates whether the Escape key was pressed, which triggers a revert to the previous value
Since	1.0.0-rc.5
Bubbles	Yes
Cancelable	Yes - via preventDefault()

select

Description	Fired when some text has been selected.
Type	CustomEvent
Since	1.23.0
Bubbles	Yes
Cancelable	No

scroll

Description	Fired when textarea is scrolled.
Type	CustomEvent
Since	1.23.0
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

Name	Description
textarea	Used 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.