Skip to main content

MultiInput

<ui5-multi-input> | Since 1.0.0-rc.9

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)
  • Move between suggestion items (selection-change event is fired)
  • Clicking on a suggestion item (selection-change event is fired if the clicked item is different than the current value. Also change event is fired )

ES6 Module Import​

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

Basic Sample​

Properties​

showValueHelpIcon​

DescriptionDetermines whether a value help icon will be visualized in the end of the input. Pressing the icon will fire value-help-trigger event.
Typeboolean
Defaultfalse

name​

DescriptionDetermines 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. Note: When the component is used inside a form element, the value is sent as the first element in the form data, even if it's empty.
Typestring | undefined
Defaultundefined

disabled​

DescriptionDefines whether the component is in disabled state.
Note: A disabled component is completely noninteractive.
Typeboolean
Defaultfalse

placeholder​

DescriptionDefines a short hint intended to aid the user with data entry when the component has no value.
Typestring | undefined
Defaultundefined

readonly​

DescriptionDefines whether the component is read-only.
Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
Typeboolean
Defaultfalse

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse
Since1.0.0-rc.3

noTypeahead​

DescriptionDefines whether the value will be autcompleted to match an item
Typeboolean
Defaultfalse
Since1.4.0

type​

DescriptionDefines 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"Text" | "Email" | "Number" | "Password" | "Tel" | "URL" | "Search"
Default"Text"

value​

DescriptionDefines the value of the component.
Note: The property is updated upon typing.
Typestring
Default""

valueState​

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

showSuggestions​

DescriptionDefines 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.
Typeboolean
Defaultfalse

maxlength​

DescriptionSets 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.
Typenumber | undefined
Defaultundefined
Since1.0.0-rc.5

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the input.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

showClearIcon​

DescriptionDefines whether the clear icon of the input will be shown.
Typeboolean
Defaultfalse
Since1.2.0

open​

DescriptionDefines 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.
Typeboolean
Defaultfalse
Since2.0.0

Slots​

tokens​

DescriptionDefines the component tokens.
TypeArray<IToken>

default​

DescriptionDefines 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.
TypeArray<IInputSuggestionItem>

icon​

DescriptionDefines the icon to be displayed in the component.
TypeArray<IIcon>

valueStateMessage​

DescriptionDefines 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.
TypeArray<HTMLElement>
Since1.0.0-rc.6

Events​

value-help-trigger​

DescriptionFired when the value help icon is pressed and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
TypeCustomEvent
BubblesYes
CancelableNo

token-delete​

DescriptionFired when tokens are being deleted.
TypeCustomEvent<MultiInputTokenDeleteEventDetail>
Parameterstokens: Array
An array containing the deleted tokens.
BubblesYes
CancelableNo

change​

DescriptionFired when the input operation has finished by pressing Enter or on focusout.
TypeCustomEvent
BubblesYes
CancelableNo

input​

DescriptionFired when the value of the component changes at each keystroke, and when a suggestion item has been selected.
TypeCustomEvent
BubblesYes
CancelableYes - via preventDefault()

select​

DescriptionFired when some text has been selected.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

selection-change​

DescriptionFired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection.
TypeCustomEvent<InputSelectionChangeEventDetail>
Parametersitem: HTMLElement
The previewed suggestion item.
Since2.0.0
BubblesYes
CancelableNo

open​

DescriptionFired when the suggestions picker is open.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

close​

DescriptionFired when the suggestions picker is closed.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
rootUsed to style the root DOM element of the Input component
inputUsed to style the native input element
clear-iconUsed to style the clear icon, which can be pressed to clear user input text

More Samples​

Add/Remove Tokens​

Items Text Wrapping​

The sample demonstrates how the text of the items wrap when too long.