Token fields

Design a token field for entering multiple discrete values in one input, such as tags, recipients, or filters. The field should support both typed entry and chip-style tokens in the same control, with the caret always readable next to existing tokens.

Define how tokens are created, edited, and removed. Show what happens when a user types a separator, pastes multiple values, backspaces into the previous token, and selects a suggestion from autocomplete. The interaction should make it clear when text is still being composed versus when it has become a committed token.

Include a suggestion panel that appears as the user types. It should support keyboard and pointer selection, show the active option clearly, and handle no-match, loading, and duplicate-token cases without dead ends.

Design the field states that matter in real use: default, focus, hover, disabled, invalid, and read-only. The error state should explain what went wrong and preserve the entered tokens so the user can fix the field without starting over.

Emphasize clear visual separation between tokens, and consider animation effects for adding or removing tokens to make the interaction delightful.