Skip to main content
Frontend Glossary

UI components · Form input

Tag Input

Also called: Tags input, Chip input, Multi-value input, Token field

An input that takes several short words. Type a word and press Enter, and it becomes a small tag inside the box. Keep typing the next one, and click the ✕ on a tag to remove it.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Add a "Product tags" input to the product edit form. It fills the form column with a min height of 36px. Show added tags as 24px-tall gray pills with an ✕ on the right, and keep the cursor right after the last tag so people can keep typing. Enter or a comma creates a tag, and Backspace removes the last one. Pasting "new,summer,cotton" splits into three tags. While typing, show matching existing tags below with how many products use each, and make the last option "Create 'xxx'." Allow up to 10 tags of 20 characters max each. On a duplicate, flash the existing tag and show "Already added." Under the input, show gray text "Press Enter or comma to add · 3/10 added." Wrap to new lines when there are many tags.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Tag Input is what you need.

Use Tag Input when

  • Tagging articles, products, or projects, where users can make up new tags
  • Entering several short values at once, like emails, phone numbers, domains, or IP addresses
  • Typing several keywords into search or filters, where each keyword can be removed on its own

Pick something else when

  • Choosing only from fixed options (cities, departments). Use a multi-select so people can't type anything they want.

    Use insteadSelect

  • Only one value is needed. Use a regular input.

    Use insteadInput

  • Each item needs several fields (a contact needs name and phone). Use a form with rows you can add and remove.

    Use insteadForm

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Pressing Enter doesn't create a tag, so every word is crammed into one box separated by commas, and removing one means carefully selecting text

  2. 02

    No suggestions from existing tags, so the same idea gets created as "design," "UI design," and "ui-design"

  3. 03

    With many tags the box scrolls sideways and the earlier tags are hidden

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

An input container that can wrap, the added tags inside it (each with a remove button), a text cursor at the end, and a suggestion list below. A count limit often shows underneath.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A tag input is for a set of short values: article tags, product keywords, skills, recipient emails, allowed domains. The user types in the box and presses Enter or a comma, and the text turns into a Tag (a small pill with an ✕) inside the box, with the cursor right after it for the next one. Backspace removes the last tag. While typing, a list of existing tags often pops up below so you don't end up with "design," "UI design," and "ui-design" as separate tags.

It looks a lot like a multi-select Select, since both show small tags in the box. The difference is where the options come from. A multi-select only picks from a fixed list. A tag input lets users create new values, while still offering suggestions. As for the Tag: a tag is the little display pill, and a tag input is the control that creates and edits those tags.

Spell out the rules: which keys confirm (Enter, comma, space), how many tags are allowed, how long each can be, and whether duplicates are OK. Don't silently drop duplicates or invalid values (like a mistyped email). Highlight them. When someone pastes "design, frontend, growth," split it into separate tags. When there are lots of tags, let the box wrap and grow taller instead of scrolling sideways and hiding the earlier ones.

Developer info
Term ID
component-tag-input
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .el-input-tag
  • .arco-input-tag
  • .t-tag-input
  • .n-dynamic-tags
  • [class*="MuiAutocomplete-root"]:has([class*="MuiAutocomplete-tag"])
  • .tagify
  • .react-tagsinput
  • .ReactTags__tags
  • .bootstrap-tagsinput
  • .vue-tags-input
  • .ti-input
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • tag-input
  • tags-input
  • input-tag
  • tag-editor
  • tags-editor
  • tag-field
  • tags-field
  • chip-input
  • chips-input
  • keyword-input
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • TagInput
  • TagsInput
  • InputTag
  • ChipInput
  • TagEditor
  • DynamicTags
  • TagField
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • form controls
Priority
3 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026