Intro

Warning
This article was written for an earlier guideline release, and may contain outdated content. An update is in progress. If you have any questions in the meantime, please post them in our SAP User Experience Community forum. Thank you!

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.

Token
Token

Usage

Use tokens only in the multi-combo boxmulti-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

  • They usually contain single text items.
  • They may also contain key-value pairs, such as John Miller (ID1234567).
  • They contain a Remove icon  , which is invisible if the token is in edit mode.
Tokens with a surrounding tokenizer
Tokens with a surrounding tokenizer

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 or tapping 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 selecting the relevant tokens, for example, by clicking them.

The user can 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 or tapping a new position. The tokens between these two cursor positions are then selected.

To replace a token, the user selects it and enters new characters.

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

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

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove  icon .

Styles

There are three different styles of tokens: regularon hover, and selected. These styles correspond to the type of interaction being used.

Regular
Regular
On hover
On hover
Selected
Selected

Guidelines

  • The tokenizer can also be used as a tag container.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation