Token input.
Collects multiple values as individually editable tokens.
See it in context
What it is
Each accepted item becomes a compact unit inside the input area. This is useful for recipients or tags, with a remaining text caret for entering the next value.
When to use it
Support adding, removing, and navigating between tokens without losing unfinished text.
Know the difference
Multi-select emphasizes choosing a set; a token input emphasizes entering and editing that set inline.
Across platforms
Web
Use a native button for an action and an anchor for navigation. Preserve keyboard activation and a visible focus indicator.
iOS · iPadOS · Android
Provide a comfortable touch target, use familiar system symbols when appropriate, and show a clear pressed or selected state.
macOS · Windows · Linux
Keep pointer, keyboard, and focus behavior consistent. Common commands can additionally expose a menu item or keyboard shortcut.
Go to the source
Primary documentation for the pattern and its platform conventions.