Tokenizer
<ui5-tokenizer>
| Since 2.0.0This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.
A ui5-tokenizer
is an invisible container for ui5-token
s that supports keyboard navigation and token selection.
The ui5-tokenizer
consists of two parts:
- Tokens - displays the available tokens.
- N-more indicator - contains the number of the remaining tokens that cannot be displayed due to the limited space.
Keyboard Handling​
Basic Navigation​
The ui5-tokenizer
provides advanced keyboard handling.
When a token is focused the user can use the following keyboard
shortcuts in order to perform a navigation:
- [Left] or [Right] / [Up] or [Down] - Navigates left and right through the tokens.
- [Home] - Navigates to the first token.
- [End] - Navigates to the last token.
The user can use the following keyboard shortcuts to perform actions (such as select, delete):
- [Space] - Selects a token.
- [Backspace] / [Delete] - Deletes a token.
Note: The deletion of a token is handled by the application with the use of the
token-delete
event.
ES6 Module Import​
import "@ui5/webcomponents/dist/Tokenizer.js";
Basic Sample​
More Samples​
Multi-line and Clear All​
With multiLine enabled, tokens are displayed across multiple lines for improved readability. The showClearAll option adds a convenient 'Clear All' button, allowing users to remove all tokens at once.
Properties​
readonly​
multiLine​
showClearAll​
disabled​
accessibleName​
accessibleNameRef​
Slots​
No slots available for this component.
Events​
token-delete​
selection-change​
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.