Intro

Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.

Tokens within a tokenizer

When to Use

Tokens can only be used with the Tokenizer as a container. In turn, use the tokenizer only in the multi-combo box, multi-input control, or value help dialog.

Token use in a multi-input control

guideline

The tokenizer can also be used as a tag container.

Anatomy

The token and tokenizer components have the following parts:

Text: Displays the token label or value.
Remove icon: Allows users to remove the token. It is hidden when the token is in edit mode.
Container: Contains the token text and :icon-declineRemove icon.
N-more label: Contains the number of the remaining tokens that cannot be displayed due to the limited space.
Tokens: Displays the available tokens.

Token anatomy

Components

The tokenizer (B) is an invisible container that can display a single or multiple tokens (A).

Tokens have the following properties:

They typically contain a single piece of text.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a :icon-declineRemove icon, which is only visible if the token is in edit mode.

Tokens (A) within a surrounding tokenizer (B)

Behavior and Interaction

Interacting

Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).

Selecting and Deselecting Tokens

Users can select tokens by clicking them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the Ctrl key and clicking the relevant tokens.

Single and multiple token selection

The user can also select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking a new position. The tokens between these two cursor positions are then selected.

Adding Tokens

The user can add a tokenizer to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered. The input field displays as many tokens as possible in the available space and an N-more label indicates the number of hidden tokens.

N-more label indicating the number of hidden tokens

information

For information on how to manage leading and trailing white space (blanks) when copying and pasting text into input controls, please see removing leading and trailing white space.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking the :icon-declineRemove icon on the token.

Styles

Token styles

There are five different styles of tokens:

A. Regular - Default appearance of a token when it is displayed but not interacted with.

B. Hover - Highlighted appearance when the cursor hovers over the token, indicating it can be selected or acted upon.

C. Selected - Appearance when a token has been clicked or selected, showing that it is active or part of a selection.

D. Hover selected - Combined appearance of a selected token when the cursor hovers over it.

E. Read only - Appearance of a token that cannot be modified or removed, typically used to display non-editable information.

Each style reflects a different interaction state a token can be in.

Localization

The token component supports both left-to-right (LTR) and right-to-left (RTL) languages and can be configured to display text according to the language direction. In LTR layouts, the token label appears on the left and the :icon-declineRemove icon on the right. In RTL layouts, this order is reversed: the label is on the right, and the :icon-declineRemove icon on the left.