Gallery

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.