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. Furthermore, the package supports Horizon themes only.

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

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

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

accessibleDescription

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

accessibleDescriptionRef

Description	Receives id(or many ids) of the elements that describe the input.
Type	string | undefined
Default	undefined
Since	2.9.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 input.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

disabled

Description	Defines whether the component is in disabled state. Note: A disabled component is completely noninteractive.
Type	boolean
Default	false

filter

Description	Defines the filter type of the component.
Type	"Contains" | "None" | "StartsWith" | "StartsWithPerTerm" (value descriptions in: InputSuggestionsFilter)
Default	"None"
Since	2.19.0

maxlength

Description	Sets the maximum number of characters available in the input field. Note: This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
Type	number | undefined
Default	undefined
Since	1.0.0-rc.5

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

noTypeahead

Description	Defines whether the value will be autcompleted to match an item
Type	boolean
Default	false
Since	1.4.0

open

Description	Defines whether the suggestions picker is open. The picker will not open if the showSuggestions property is set to false, the input is disabled or the input is readonly. The picker will close automatically and close event will be fired if the input is not in the viewport.
Type	boolean
Default	false
Since	2.0.0

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

showClearIcon

Description	Defines whether the clear icon of the input will be shown.
Type	boolean
Default	false
Since	1.2.0

showSuggestions

Description	Defines whether the component should show suggestions, if such are present.
Type	boolean
Default	false

type

Description	Defines the HTML type of the component. Notes: - The particular effect of this property differs depending on the browser and the current language settings, especially for type Number. - The property is mostly intended to be used with touch devices that use different soft keyboard layouts depending on the given input type. - Type Number does not support suggestions.
Type	"Email" | "Number" | "Password" | "Search" | "Tel" | "Text" | "URL" (value descriptions in: InputType)
Default	"Text"

value

Description	Defines the value of the component. Note: The property is updated upon typing.
Type	string
Default	""

valueState

Description	Defines the value state of the component.
Type	"Critical" | "Information" | "Negative" | "None" | "Positive"
Default	"None"

Slots

actions

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

default

Description	Defines the suggestion items. Note: The suggestions would be displayed only if the showSuggestions property is set to true. Note: The <ui5-suggestion-item>, <ui5-suggestion-item-group> and ui5-suggestion-item-custom are recommended to be used as suggestion items. Note: Input with type Number does not support suggestions.
Type	Array<IInputSuggestionItem>

icon

Description	Defines the icon to be displayed in the component.
Type	Array<IIcon>

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, when the component is in Information, Critical or Negative value state. Note: If the component has suggestionItems, the valueStateMessage would be displayed as part of the same popover, if used on desktop, or dialog - on phone.
Type	Array<HTMLElement>
Since	1.0.0-rc.6

Events

button-click

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

item-click

Description	Fired when an item from the AI actions menu is clicked.
Type	CustomEvent<InputItemClickEventDetail>
Parameters	item: HTMLElement The currently clicked menu item. text: string The text of the currently clicked menu item.
Bubbles	No
Cancelable	No

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<InputVersionChangeEventDetail>
Parameters	backwards: boolean The text of the currently clicked menu item.
Bubbles	No
Cancelable	No

change

Description	Fired when the input operation has finished by pressing Enter or on focusout.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

close

Description	Fired when the suggestions picker is closed.
Type	CustomEvent
Since	2.0.0
Bubbles	No
Cancelable	No

input

Description	Fired when the value of the component changes at each keystroke, and when a suggestion item has been selected.
Type	CustomEvent
Bubbles	Yes
Cancelable	Yes - via preventDefault()

open

Description	Fired when the suggestions picker is open.
Type	CustomEvent
Since	2.0.0
Bubbles	Yes
Cancelable	No

select

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

selection-change

Description	Fired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection.
Type	CustomEvent<InputSelectionChangeEventDetail>
Parameters	item: HTMLElement The previewed suggestion item.
Since	2.0.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
clear-icon	Used to style the clear icon, which can be pressed to clear user input text
input	Used to style the native input element
root	Used to style the root DOM element of the Input component

CSS Custom States

No CSS custom states available for this component.