The ui5-input component allows the user to enter and edit text or numeric values in one line.
Additionally, you can provide suggestionItems,
that are displayed in a popover right under the input.
The text field can be editable or read-only (readonly property),
and it can be enabled or disabled (disabled property).
To visualize semantic states, such as "Negative" or "Critical", the valueState property is provided.
When the user makes changes to the text, the change event is fired,
which enables you to react on any text change.
Note: If you are using the ui5-input as a single npm module,
don't forget to import the InputSuggestions module from
"@ui5/webcomponents/dist/features/InputSuggestions.js"
to enable the suggestions functionality.
The ui5-input provides the following keyboard shortcuts:
[Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.
[Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.
[Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.
[Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.
[Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.
[End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.
[Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.
[Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.
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.
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.
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.
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.
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.
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.
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.