Token input
A text field where each accepted value becomes a small removable pill inside the box.
See it
What it is
A token input is a text field that turns each accepted value into a compact, removable chip inside the same box. Gmail's recipient field is the familiar example: type an address, accept it, and it becomes a named object you can remove without disturbing the others.
Reach for one when people are building a short set of discrete values, such as recipients, tags, skills, or filters. It works especially well with autocomplete, where the text field searches a list and accepting a result creates the token.
Gotcha: the keyboard model has more edges than the visual suggests. Backspace should remove the last token only when the text field is empty, duplicate values need a clear response, and every remove button needs an accessible name. Keep focus in the field after adding or removing a token, and announce the change to screen readers.
Ask AI for it
Build a token input for adding email recipients. Render accepted addresses as chips inside a flex-wrapping field, each with a labelled remove button, followed by a real HTML input. Give the input role="combobox", aria-expanded, and aria-controls pointing to a role="listbox" autocomplete popup. Enter or a comma accepts a valid address, Backspace removes the final chip only when the input is empty, and duplicate addresses produce an inline error. Keep focus in the input after every change and announce additions and removals through an aria-live region.