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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6053a672c6daf1822d777f41_token_intro.png)
Anatomy
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6053a680264699981e78acb9_token_anatomy.png)
Value
When the value is not inputted by a user, values are title case without punctuation.
States
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6273ed4dabb1b143d500be62_token_states.png)
Behavior
A user can clear the token with the mouse or use the keyboard by hitting Enter/Return when in a focused state.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6053abafd6eea224bb3d6e0d_token_behavior.gif)
Truncation
The following formatting can be used if a token needs to truncate:
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/61d60b54709ef4c298799a39_token-truncation.png)
Specifications
Padding
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6273ed8639edd3189aaa336e_token_padding.png)
Styling
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/609b13e8f0aecf8a95096c9b_token-styling.png)