Skip to main content

Token

Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.

ES6 Module Import​

import "@ui5/webcomponents/dist/Token.js";

Basic Sample​

Properties​

text​

DescriptionDefines the text of the token.
Typestring
Default""

readonly​

DescriptionDefines whether the component is read-only.
Note: A read-only component can not be deleted or selected, but still provides visual feedback upon user interaction.
Typeboolean
Defaultfalse

selected​

DescriptionDefines whether the component is selected or not.
Typeboolean
Defaultfalse

Slots​

closeIcon​

DescriptionDefines the close icon for the token. If nothing is provided to this slot, the default close icon will be used. Accepts ui5-icon.
TypeArray<IIcon>
Since1.0.0-rc.9

Events​

select​

DescriptionFired when the the component is selected by user interaction with mouse or by clicking space.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Token in MultiInput​

The main use-case of the Token is to be used in a MultiInput. You can Remove tokens by clicking the "X" button and add tokens by typing something in the input field, followed by "ENTER".