Skip to main content

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​

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

multiLine​

DescriptionDefines whether tokens are displayed on multiple lines.
Note: The multiLine property is in an experimental state and is a subject to change.
Typeboolean
Defaultfalse
Since2.5.0

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

showClearAll​

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

disabled​

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

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring | undefined
Defaultundefined

Slots​

default​

DescriptionDefines the tokens to be displayed.
TypeArray<Token>

Events​

token-delete​

DescriptionFired when tokens are being deleted (delete icon, delete or backspace is pressed)
TypeCustomEvent<TokenizerTokenDeleteEventDetail>
Parameterstokens: Array
An array containing the deleted tokens.
BubblesYes
CancelableNo

selection-change​

DescriptionFired when token selection is changed by user interaction
TypeCustomEvent<TokenizerSelectionChangeEventDetail>
Parameterstokens: Array<Token>
An array of the selected items.
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.