Tokenizer

<ui5-tokenizer> | Since 2.0.0

info

This 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-tokens 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

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

multiLine

Description	Defines whether tokens are displayed on multiple lines. Note: The multiLine property is in an experimental state and is a subject to change.
Type	boolean
Default	false

showClearAll

Description	Defines whether "Clear All" button is present. Ensure multiLine is enabled, otherwise showClearAll will have no effect. Note: The showClearAll property is in an experimental state and is a subject to change.
Type	boolean
Default	false

disabled

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

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the component.
Type	string | undefined
Default	undefined

Slots

No slots available for this component.

Events

token-delete

Description	Fired when tokens are being deleted (delete icon, delete or backspace is pressed)
Type	CustomEvent<TokenizerTokenDeleteEventDetail>
Parameters	tokens: Array An array containing the deleted tokens.
Bubbles	Yes
Cancelable	No

selection-change

Description	Fired when token selection is changed by user interaction
Type	CustomEvent<TokenizerSelectionChangeEventDetail>
Parameters	tokens: Array<Token> An array of the selected items.
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.