Input

<ui5-ai-input> | Since 2.16.0

info

The @ui5/webcomponents-ai package is under active development and considered experimental. Component APIs are subject to change.

The ui5-ai-input component extends the standard ui5-input with AI Writing Assistant capabilities.

Structure

The ui5-ai-input consists of the following main parts:

• Input Field – Inherits all standard Input behaviors.
• AI Action Button – Appears when focused or loading, providing access to AI-related actions or stopping generation.

The component automatically determines which elements to render based on its internal state:

• The AI Button is only shown when there are available actions.
• The version navigation appears only when totalVersions > 1.

Keyboard Support

• Shift + F4 — Opens the AI menu.
• Ctrl + Shift + Z / Y — Navigates backward/forward between AI-generated versions.

ES6 Module Import

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

Basic Sample

Properties

currentVersion

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

totalVersions

Description	Indicates the total number of result versions available. When not set or set to 0, the versioning will be hidden.
Type	number
Default	0

loading

Description	Defines whether the AI Writing Assistant is currently loading. When true, indicates that an AI action is in progress.
Type	boolean
Default	false

Slots

actions

Description	Defines the items of the menu for the component.
Type	Array<HTMLElement>

Events

button-click

Description	Fired when the user selects the AI button.
Type	CustomEvent
Bubbles	No
Cancelable	Yes - via preventDefault()

stop-generation

Description	Fired when the user selects the "Stop" button to stop ongoing AI text generation.
Type	CustomEvent
Bubbles	No
Cancelable	No

version-change

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

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.