Multi Input

@ui5/webcomponents
<ui5-multi-input>

Basic Multi Input

<ui5-multi-input value="basic input"></ui5-multi-input>
<ui5-multi-input show-value-help-icon value="value help icon"></ui5-multi-input>
	

Multi Input with tokens

<ui5-multi-input>
	<ui5-token slot="tokens" text="Bulgaria"></ui5-token>
</ui5-multi-input>

<ui5-multi-input>
	<ui5-token slot="tokens" text="Argentina"></ui5-token>
	<ui5-token slot="tokens" text="Bulgaria"></ui5-token>
	<ui5-token slot="tokens" text="England"></ui5-token>
	<ui5-token slot="tokens" text="Finland"></ui5-token>
	<ui5-token slot="tokens" text="Germany"></ui5-token>
	<ui5-token slot="tokens" text="Hungary"></ui5-token>
	<ui5-token slot="tokens" text="Italy"></ui5-token>
	<ui5-token slot="tokens" text="Luxembourg"></ui5-token>
	<ui5-token slot="tokens" text="Mexico"></ui5-token>
	<ui5-token slot="tokens" text="Philippines"></ui5-token>
	<ui5-token slot="tokens" text="Sweden"></ui5-token>
	<ui5-token slot="tokens" text="USA"></ui5-token>
</ui5-multi-input>
	

Multi Input and token creation onChange

Token is already in the list
<ui5-multi-input show-suggestions id="token-unique">
		<div slot="valueStateMessage">Token is already in the list</div>
</ui5-multi-input>

<script>
	var createTokenFromText = function (text) {
		var token = document.createElement("ui5-token");

		token.setAttribute("text", text);
		token.setAttribute("slot", "tokens");

		return token;
	};

	document.getElementById("token-unique").addEventListener("change", function (event) {
		if (!event.target.value) {
			return;
		};

		var isDuplicate = event.target.tokens.some(function(token) {
			return token.text === event.target.value
		});

		if (isDuplicate) {
			event.target.valueState = "Error";

			setTimeout(function () {
				event.target.valueState = "Normal";
			}, 2000);

			return;
		}

		event.target.appendChild(createTokenFromText(event.target.value));

		event.target.value = "";
	});
</script>
	

Overview

A ui5-multi-input field allows the user to enter multiple values, which are displayed as ui5-token. User can choose interaction for creating tokens. Fiori Guidelines say that user should create tokens when:
  • Type a value in the input and press enter or focus out the input field (change event is fired)
  • Select a value from the suggestion list
  • (suggestion-item-select event is fired)

ES6 Module Import

import "@ui5/webcomponents/dist/MultiInput";

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
showValueHelpIcon
show-value-help-icon
boolean
false
Determines whether a value help icon will be visualized in the end of the input. Pressing the icon will fire value-help-trigger event.
accessibleName
accessible-name
String
Sets the accessible aria name of the component.
since v1.0.0-rc.15
accessibleNameRef
accessible-name-ref
String
""
Receives id(or many ids) of the elements that label the input.
since v1.0.0-rc.15
disabled
boolean
false
Defines whether the component is in disabled state.

Note: A disabled component is completely noninteractive.
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 component 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 component 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 component has no value.
previewItem (readonly)
preview-item
sap.ui.webcomponents.main.IInputSuggestionItem
The suggestion item on preview.
readonly
boolean
false
Defines whether the component is read-only.

Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
required
boolean
false
Defines whether the component is required.
since v1.0.0-rc.3
showSuggestions
show-suggestions
boolean
false
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
InputType
"Text"
Defines the HTML type of the component. 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 component.

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

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
tokens
HTMLElement [0..n]
Defines the component tokens.
default
HTMLElement [0..n]
Defines the 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 suggestions would be displayed only if the showSuggestions property is set to true.

Note: The <ui5-suggestion-item> and <ui5-suggestion-group-item> 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-group-item> for your convenience.
icon
HTMLElement [0..n]
Defines the icon to be displayed in the component.
valueStateMessage
HTMLElement [0..n]
Defines the value state message that will be displayed as pop up under the component.

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, Warning or Error 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.

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
token-delete
Fired when a token is about to be deleted.
token
type: HTMLElement
description: deleted token.
value-help-trigger
Fired when the value help icon is pressed and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
change
Fired when the input operation has finished by pressing Enter or on focusout.
input
Fired when the value of the component changes at each keystroke, and when a suggestion item has been selected.
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.

Token

Overview

Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.

ES6 Module Import

import "@ui5/webcomponents/dist/Token.js";

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
readonly
boolean
Defines whether the component is read-only.

Note: A read-only component can not be deleted or selected, but still provides visual feedback upon user interaction.
selected
boolean
Defines whether the component is selected or not.
text
string
""
Defines the text of the token.

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
closeIcon
sap.ui.webcomponents.main.IIcon
Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used. Accepts ui5-icon.

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
select
Fired when the the component is selected by user interaction with mouse or by clicking space.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel