Updated: July 30, 2021

Token

sap.m.Token | sap.m.Tokenizer

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.

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 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.

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

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 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 Remove  icon.

Styles

There are five different styles of tokens: regularon hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular
Regular
On hover
On hover
Selected
Selected
Read only
Read only
Hover selected
Hover 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