Tag Input
标签输入
Aliases:标签输入标签框打标签的输入框chips 输入token inputtag box
What is it
Pressing Enter or typing a separator turns the current text into a removable chip; chips line up inside the field while the caret stays at the end. It mixes free typing with per-item management — common for recipients, hashtags, file names and filter terms. Backspace removes the last chip, the × removes a specific one.
Interactive playground
Try it. Make an informed choice.Type a few words and press Enter to mint chips; Backspace removes the last, × removes one.
Loading lab…
What to look for
- 01Every chip exposes a reachable remove control
- 02Input and chips share one container and the caret can keep typing
✓ When to use
- Multi-value input where each item is removable (recipients, tags, filters)
- The option set is open and users may invent new values
- Users must see what is already entered while still typing
✕ When not to use
- A small fixed option set — use a select or radio group
- A single short string — a plain input is enough
- Ordering or grouping of options — use a multi-select or transfer list
Variants
Free-form tags
自由输入
Enter creates a chip; no vocabulary check
Autocomplete tokens
自动补全
Suggests candidates while typing, still allows new values
File-name chips
文件名标签
Shows chosen file names; removable but not editable
Implementation
flexflex-wrapgapborder-radius: 9999pxThe container is a flex-wrap region that looks like one input: pill chips fill the front and a real input flexes into the remaining width. Commit a trimmed, de-duplicated value on Enter, comma or blur; Backspace deletes the last chip only when the input is empty. Use a real button (not a styled span) for remove and announce "removed xx" via aria-live. The autocomplete variant drops an absolutely positioned suggestion list under the container with arrow-key highlight.
Platform API
<input>role="listbox"aria-livekeydownIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| MUI | Autocomplete (multiple) |
| React Select | Multi value |
| AntD | Select mode="tags" |
Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarA text field paired with a list of suggestions. People type to narrow a set, then commit a value with pointer or keyboard. Typed text, the active suggestion and the committed selection are separate states. Provide a clear empty result and a way to clear the field when nothing matches.
ComponentsSimilarA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsUsed withA control for picking several values from one option set, echoing the chosen ones as removable chips. Unlike a single select, the panel stays open after each pick and every chip can be removed on its own. Fits tags, permissions and filter facets; pair it with search when the set is large.
ComponentsUsed with