Input

@ui5/webcomponents
<ui5-input>

Basic Input

<ui5-input value="Input"></ui5-input>
<ui5-input readonly value="readonly Input"></ui5-input>
<ui5-input disabled value="Disabled Input"></ui5-input>
	

Input With Suggestions (note: the usage depends on the framework you are using)

<ui5-input id="suggestions-input" show-suggestions placeholder="Start typing country name"></ui5-input>

<script>
	// data
	var ui5_database_entries = ["Argentina", "Bulgaria", "Canada", "Columbia", "Croatia", "Denmark", '...'];

	var input = document.getElementById("suggestions-input");
	
	// listen for the input event
	input.addEventListener("input", event => {
		var value = input.value;
		var suggestionItems = [];

		if (value) {
			suggestionItems = ui5_database_entries.filter(item => {
				return item.toUpperCase().indexOf(value.toUpperCase()) === 0;
			});
		}

		// remove the previous suggestions
		[].slice.call(input.children).forEach(child => {
			input.removeChild(child);
		});

		// add the new suggestions according to the  user input
		suggestionItems.forEach(item => {
			var li = document.createElement("ui5-suggestion-item");
			li.icon = "world";
			li.info = "explore";
			li.infoState = "Success";
			li.description = "travel the world";
			li.text = item;
			input.appendChild(li);
		});
	});
</script>
	

Input with Value State

<ui5-input value="Success" value-state="Success"></ui5-input>
<ui5-input value="Warning" value-state="Warning"></ui5-input>
<ui5-input value="Error" value-state="Error"></ui5-input>
<ui5-input value="Information" value-state="Information"></ui5-input>
	

Input with Suggestions and Value State message

This is an error message. Extra long text used as an error message.
Cozy Compact Condensed
<ui5-input id="value-state-suggestions" class="samples-responsive-padding-bottom" placeholder="Start typing country name" show-suggestions value-state="Warning">
</ui5-input>

<ui5-input placeholder="Choose content density" show-suggestions value-state="Error">
	<div slot="valueStateMessage">This is an error message. Extra long text used as an error message.</div>
	<ui5-li>Cozy</ui5-li>
	<ui5-li>Compact</ui5-li>
	<ui5-li>Condensed</ui5-li>
</ui5-input>
	

Input as Search Field

<style>
	.inputIcon {
		background: #fafafa;
		color: #0a6ed1;
		cursor: pointer;
	}
	.inputIcon:hover{
		background: rgba(224,224,224,0.5)
	}
</style>

<ui5-input id="searchInput" placeholder="Enter search criteria ..." style="width: 100%">
	<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>

<script>
	var searchCriteria = "PASTA";
	searchIcon.addEventListener("click", function(){
		alert("Look for: " + searchCriteria);
	});
	searchInput.addEventListener("change", function(e){
		searchCriteria = e.target.value;
	});
</script>
	

Input with Label

Name
Secret Code
<ui5-label class="samples-big-margin-right" for="myInput" required>Name</ui5-label>
<ui5-input id="myInput" placeholder="Enter your Name" required></ui5-input>
	

Overview

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 (enabled property). To visualize semantic states, such as "error" or "warning", 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.

ES6 Module Import

import "@ui5/webcomponents/dist/Input.js";
import "@ui5/webcomponents/dist/features/InputSuggestions.js"; (optional - for input suggestions support)

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
disabled
boolean
false
Defines whether the ui5-input is in disabled state.

Note: A disabled ui5-input is completely noninteractive.
highlight
boolean
false
Defines if characters within the suggestions are to be highlighted in case the input value matches parts of the suggestions text.

Note: takes effect when showSuggestions is set to true
maxlength
Integer
Sets the maximum number of characters available in the input field.
since v1.0.0-rc.5
name
string
""
Determines the name with which the ui5-input will be submitted in an HTML form.

Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Note: When set, a native input HTML element will be created inside the ui5-input so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
placeholder
string
""
Defines a short hint intended to aid the user with data entry when the ui5-input has no value.
previewItem (readonly)
preview-item
ui5-suggestion-item
The suggestion item on preview.
readonly
boolean
false
Defines whether the ui5-input is read-only.

Note: A read-only ui5-input is not editable, but still provides visual feedback upon user interaction.
required
boolean
false
Defines whether the ui5-input is required.
since v1.0.0-rc.3
showSuggestions
show-suggestions
boolean
false
Defines whether the ui5-input should show suggestions, if such are present.

Note: Don`t forget to import the InputSuggestions module from "@ui5/webcomponents/dist/features/InputSuggestions.js" to enable this functionality.
type
InputType
"Text"
Defines the HTML type of the ui5-input. Available options are: Text, Email, Number, Password, Tel, and URL.

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.
value
string
""
Defines the value of the ui5-input.

Note: The property is updated upon typing.
valueState
value-state
ValueState
"None"
Defines the value state of the ui5-input.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the ui5-input suggestion items.

Example:

<ui5-input show-suggestions>
    <ui5-suggestion-item text="Item #1"></ui5-suggestion-item>
    <ui5-suggestion-item text="Item #2"></ui5-suggestion-item>
</ui5-input>


Note: The suggestion would be displayed only if the showSuggestions property is set to true.

Note: The <ui5-suggestion-item> is recommended to be used as a suggestion item. Importing the Input Suggestions Support feature:
import "@ui5/webcomponents/dist/features/InputSuggestions.js";
also automatically imports the <ui5-suggestion-item> for your convenience.
icon
HTMLElement [0..n]
Defines the icon to be displayed in the ui5-input.
valueStateMessage
HTMLElement [0..n]
Defines the value state message that will be displayed as pop up under the ui5-input.

Note: If not specified, a default text (in the respective language) will be displayed.
Note: The valueStateMessage would be displayed, when the ui5-input is in Information, Warning or Error value state.
Note: If the ui5-input has suggestionItems, the valueStateMessage would be displayed as part of the same popover, if used on desktop, or dialog - on phone.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the input operation has finished by pressing Enter or on focusout.
input
Fired when the value of the ui5-input changes at each keystroke, and when a suggestion item has been selected.
submit
Fired when user presses Enter key on the ui5-input.

Note: The event is fired independent of whether there was a change before or not. If change was performed, the event is fired after the change event. The event is also fired when an item of the select list is selected by pressing Enter.
suggestion-item-preview
Fired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection.
since v1.0.0-rc.8
item
type: HTMLElement
description: The previewed suggestion item
targetRef
type: HTMLElement
description: The DOM ref of the suggestion item.
suggestion-item-select
Fired when a suggestion item, that is displayed in the suggestion popup, is selected.
item
type: HTMLElement
description: The selected item
suggestion-scroll
Fired when the user scrolls the suggestion popover.
since v1.0.0-rc.8
scrollTop
type: Integer
description: The current scroll position
scrollContainer
type: HTMLElement
description: The scroll container

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
isOpen
Checks if the value state popover is open.

SuggestionItem

The ui5-suggestion-item represents the suggestion item of the ui5-input.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
description
string
Defines the description displayed right under the item text, if such is present.
group
boolean
false
Defines the item to be displayed as a group item.

Note: When set, the other properties, such as image, icon, description, etc. will be omitted and only the text will be displayed.
icon
string
Defines the icon source URI.

Note: SAP-icons font provides numerous buil-in icons. To find all the available icons, see the Icon Explorer.
iconEnd
icon-end
boolean
false
Defines whether the icon should be displayed in the beginning of the item or in the end.

Note: If image is set, the icon would be displayed after the image.
image
string
Defines the image source URI.

Note: The image would be displayed in the beginning of the item.
info
string
Defines the info, displayed in the end of the item.
infoState
info-state
ValueState
"None"
Defines the state of the info.

Available options are: "None" (by default), "Success", "Warning" and "Erorr".
text
string
""
Defines the text of the ui5-suggestion-item.
type
ListItemType
"Active"
Defines the visual indication and behavior of the item. Available options are Active (by default), Inactive and Detail.

Note: When set to Active, the item will provide visual response upon press and hover, while when Inactive or Detail - will not.
since v1.0.0-rc.8
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel