PromptInput

<ui5-ai-prompt-input>

info

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

The ui5-ai-prompt-input component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.

Note: The web component is in an experimental state

ES6 Module Import

`import "@ui5/webcomponents-ai/dist/PromptInput.js

Basic Sample

Properties

value

Description	Defines the value of the component.
Type	string
Default	""
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
Since	2.0.0

label

Description	Defines the label of the input field.
Type	string | undefined
Default	undefined
Since	2.0.0

showClearIcon

Description	Defines whether the clear icon of the input will be shown.
Type	boolean
Default	false
Since	2.0.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
Since	2.0.0

disabled

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

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
Since	2.0.0

maxlength

Description	Sets the maximum number of characters available in the input field.
Type	number | undefined
Default	undefined
Since	2.0.0

valueState

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

showSuggestions

Description	Defines whether the component should show suggestions, if such are present. Note: You need to import the InputSuggestions module from "@ui5/webcomponents/dist/features/InputSuggestions.js" to enable this functionality.
Type	boolean
Default	false

Slots

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: Importing the Input Suggestions Support feature: import "@ui5/webcomponents/dist/features/InputSuggestions.js"; automatically imports the <ui5-suggestion-item> and <ui5-suggestion-item-group> for your convenience.

Type

Array<IInputSuggestionItem>

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.
Type	Array<HTMLElement>
Since	2.0.0

Events

submit

Description	Fired when the input operation has finished by pressing Enter or AI button is clicked.
Type	CustomEvent
Since	2.0.0
Bubbles	Yes
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
Since	2.0.0
Bubbles	Yes
Cancelable	No

change

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

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.