TextArea

<ui5-ai-textarea> | Since 2.16.0

info

The @ui5/webcomponents-ai package is under development and considered experimental - components' APIs are subject to change. Furthermore, the package supports Horizon themes only.

The ui5-ai-textarea component extends the standard TextArea with Writing Assistant capabilities. It provides AI-powered text generation, editing suggestions, and version management functionality.

Structure

The ui5-ai-textarea consists of the following elements:

• TextArea: The main text input area with all standard textarea functionality
• WritingAssistant: Dedicated toolbar containing:
  • Versioning: A component with left/right navigation buttons and a label for browsing AI-generated versions
  • AI Button: Opens a menu that can be extended with custom AI generation options through slotting

ES6 Module Import

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

Basic Sample

Properties

currentVersion

Description	Indicates the index of the currently displayed version.
Type	number
Default	0

loading

Description	Defines whether the ui5-ai-textarea is currently in a loading(processing) state.
Type	boolean
Default	false

promptDescription

Description	Defines the prompt description of the current action.
Type	string
Default	""

totalVersions

Description	Indicates the total number of result versions available. Notes: Versioning is hidden if the value is 0
Type	number
Default	0

accessibleDescription

Description	Defines the accessible description of the component.
Type	string | undefined
Default	undefined
Since	2.16.0

accessibleDescriptionRef

Description	Receives id(or many ids) of the elements that describe the textarea.
Type	string | undefined
Default	undefined
Since	2.16.0

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

disabled

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

maxlength

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

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

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

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

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

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

value

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

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

Slots

menu

Description	Defines a slot for ui5-menu integration. This slot allows you to pass a ui5-menu instance that will be associated with the assistant.
Type	HTMLElement

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

stop-generation

Description	Fired when the user requests to stop AI text generation.
Type	CustomEvent
Bubbles	No
Cancelable	No

version-change

Description	Fired when the user clicks on version navigation buttons.
Type	CustomEvent<TextAreaVersionChangeEventDetail>
Parameters	backwards: boolean Indicates if navigation is backwards (true) or forwards (false, default).
Bubbles	No
Cancelable	No

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()

scroll

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

select

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

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.

Name	Description
textarea	Used to style the native textarea

CSS Custom States

No CSS custom states available for this component.

Extended Sample

This extended sample showcases advanced AI TextArea features including multiple AI actions and version management.