Token

We use tokens in our multi select dropdowns and file attachers to indicate what has been selected or attached. Tokens in these components are removable.
Demo and Developer Guidelines

Anatomy

Value

When the value is not inputted by a user, values are title case without punctuation.

States

Behavior

A user can clear the token with the mouse or use the keyboard by hitting Enter/Return when in a focused state.

Truncation

The following formatting can be used if a token needs to truncate:

Specifications

Padding

Styling