MultiComboBox
<ui5-multi-combobox> | Since 0.11.0The ui5-multi-combobox component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
The drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.
Structure
The ui5-multi-combobox consists of the following elements:
- Tokenizer - a list of tokens with selected options.
- Input field - displays the selected option/s as token/s. Users can type to filter the list.
- Drop-down arrow - expands\collapses the option list.
- Option list - the list of available options.
Keyboard Handling
The ui5-multi-combobox provides advanced keyboard handling.
Picker
If the ui5-multi-combobox is focused,
you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
Once the drop-down is opened, you can use the UP and DOWN arrow keys
to navigate through the available options and select one by pressing the Space or Enter keys.
[Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.
Tokens
- Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).
- Delete - deletes the token and focuses the previous token.
- Backspace - deletes the token and focus the next token.
ES6 Module Import
import "@ui5/webcomponents/dist/MultiComboBox.js";