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

Description	Determines whether a value help icon will be visualized in the end of the input. Pressing the icon will fire value-help-trigger event.
Type	boolean
Default	false

name

Description	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. 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.
Type	string | undefined
Default	undefined

disabled

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

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

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

required

Description	Defines whether the component is required.
Type	boolean
Default	false
Since	1.0.0-rc.3

noTypeahead

Description	Defines whether the value will be autcompleted to match an item
Type	boolean
Default	false
Since	1.4.0

type

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

value

Description	Defines the value of the component. Note: The property is updated upon typing.
Type	string
Default	""

valueState

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

showSuggestions

Description	Defines whether the component should show suggestions, if such are present.
Type	boolean
Default	false

maxlength

Description	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.
Type	number | undefined
Default	undefined
Since	1.0.0-rc.5

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the input.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

accessibleDescription

Description	Defines the accessible description of the component.
Type	string | undefined
Default	undefined
Since	2.9.0

accessibleDescriptionRef

Description	Receives id(or many ids) of the elements that describe the input.
Type	string | undefined
Default	undefined
Since	2.9.0

showClearIcon

Description	Defines whether the clear icon of the input will be shown.
Type	boolean
Default	false
Since	1.2.0

open

Description	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.
Type	boolean
Default	false
Since	2.0.0

Slots

tokens

Description	Defines the component tokens.
Type	Array<IToken>

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.
Type	Array<IInputSuggestionItem>

icon

Description	Defines the icon to be displayed in the component.
Type	Array<IIcon>

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. 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.
Type	Array<HTMLElement>
Since	1.0.0-rc.6

Events

value-help-trigger

Description	Fired when the value help icon is pressed and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

token-delete

Description	Fired when tokens are being deleted.
Type	CustomEvent<MultiInputTokenDeleteEventDetail>
Parameters	tokens: Array An array containing the deleted tokens.
Bubbles	Yes
Cancelable	No

change

Description	Fired when the input operation has finished by pressing Enter or on focusout.
Type	CustomEvent
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
Bubbles	Yes
Cancelable	Yes - via preventDefault()

select

Description	Fired when some text has been selected.
Type	CustomEvent
Since	2.0.0
Bubbles	Yes
Cancelable	No

selection-change

Description	Fired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection.
Type	CustomEvent<InputSelectionChangeEventDetail>
Parameters	item: HTMLElement The previewed suggestion item.
Since	2.0.0
Bubbles	Yes
Cancelable	No

open

Description	Fired when the suggestions picker is open.
Type	CustomEvent
Since	2.0.0
Bubbles	Yes
Cancelable	No

close

Description	Fired when the suggestions picker is closed.
Type	CustomEvent
Since	2.0.0
Bubbles	No
Cancelable	No

Methods

No methods available for this component.

CSS Parts

Name	Description
root	Used to style the root DOM element of the Input component
input	Used to style the native input element
clear-icon	Used 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.