Tag input or combobox?

A combobox selects from known options, sometimes several. A tag input lets people invent values on the fly. GitHub issue labels can be either: pick from a list if labels are curated, type new ones if the team allows it.

Enter and comma are the usual pair. Document the choice in helper text. Tab can add the current draft if your form has no better use for Tab on that field.

How do I remove a tag?

A small button on the chip, labelled Remove plus the tag text. Backspace on an empty input removes the last chip. Both paths matter for keyboard users.

Should duplicates be allowed?

Almost never. Reject a second chip with the same text, case insensitive, and keep focus in the input.

Is there a limit on how many tags?

Set a max when the backend has one. Disable the input at the limit and say how many are allowed.

How long can each tag be?

Truncate visually with the full text in a title attribute, or block typing past a character count. Long tags wrap badly inside a chip row.

Tag input

A tag input collects many short labels in one field, each shown as a removable chip. People add values by typing and remove them without leaving the keyboard.

Forms and inputBuild difficulty: Hard

Also called Chip input, Token field, Label picker.

Labels

DesignUrgent

2 labels selected

Type a label and press Enter or comma to add it. Backspace on an empty field removes the last chip. Click the × on a chip to remove it.

For designers

A tag input is how you ask for many small strings without opening a new field each time. Gmail's To line, Trello card labels and Jira components all compress several values into one row of chips.

The cost is complexity. Keyboard flow, duplicate handling, paste of comma-separated lists and screen reader announcements for add and remove all need planning. If the options are fixed and fewer than ten, checkboxes or a multi-select combobox may cost less to build and less to use.

Keep chips short. If a value might run past twenty characters, it is probably a note field, not a tag. Truncate with a tooltip on hover for the rare long entry, but design for labels like Bug or EU VAT, not sentences.

Use a tag input when

Someone may add several short values of the same kind, like labels or email recipients
Each value should stay visible as its own chip after it is added
Removing one value should not disturb the others

Reach for something else when

The person picks from a fixed list of options you already know. Use a combobox instead.
Each option is a yes or no on its own row with a description. Use a group of checkboxes instead.
Only one value is allowed. Use a text field instead.
The values are read-only labels on a record someone cannot edit. Use badges and tags instead.

Variants

Max 20 characters

BugFeature

Read only chips

PaidEUVAT registered

Fixed labels on a record. No input when the set cannot change.

The same pattern with a character limit on each tag and a cap on how many can be added.

With suggestions. A dropdown under the input offers known tags as the person types. New values still work when the list does not match.

Character limit. Each chip caps at 20 or 30 characters. Show the limit before someone types a paragraph into one chip.

Read-only chips. Fixed labels on a profile or record. No input, no remove button. That is display, and badges and tags cover it.

How to build a tag input

There is no native tag input. Build a text field inside a container that also holds the chips. Each chip is a removable token with its own button.

<label for="labels">Labels</label>
<div role="group" aria-labelledby="labels">
  <ul aria-label="Selected labels">
    <li>
      <span>Design</span>
      <button type="button" aria-label="Remove Design">×</button>
    </li>
  </ul>
  <input
    id="labels"
    type="text"
    aria-describedby="labels-hint"
    placeholder="Add a label"
  />
</div>
<p id="labels-hint">Press Enter to add. Backspace removes the last label.</p>

Focus stays in the text input while chips sit before it in the tab order only when someone tabs to a remove button. On Enter, move the trimmed text into a chip and clear the input. Announce additions and removals with a live region if the list is long.

Comma-separated paste is the hidden requirement. People copy ten emails from a spreadsheet and expect them to become ten chips. Split on comma, semicolon and newline, trim whitespace, then reject duplicates before you add.

Edge cases

Pasting several values. Split on comma or newline and add each non-empty segment as its own chip.

Very long lists. Scroll the chip row horizontally or wrap to multiple lines. Cap the count before the field becomes a wall of chips.

Validation errors. Mark the whole group invalid and keep the chips editable. Do not drop chips silently when submit fails.

Creating tags on the fly. When someone types a label that does not exist yet, confirm policy in helper text: Press Enter to create a new label. Server-side validation still decides if the tag is allowed.

Common questions

Tag input or combobox?: A combobox selects from known options, sometimes several. A tag input lets people invent values on the fly. GitHub issue labels can be either: pick from a list if labels are curated, type new ones if the team allows it.
What keys add a tag?: Enter and comma are the usual pair. Document the choice in helper text. Tab can add the current draft if your form has no better use for Tab on that field.
How do I remove a tag?: A small button on the chip, labelled Remove plus the tag text. Backspace on an empty input removes the last chip. Both paths matter for keyboard users.
Should duplicates be allowed?: Almost never. Reject a second chip with the same text, case insensitive, and keep focus in the input.
Is there a limit on how many tags?: Set a max when the backend has one. Disable the input at the limit and say how many are allowed.
How long can each tag be?: Truncate visually with the full text in a title attribute, or block typing past a character count. Long tags wrap badly inside a chip row.

Last reviewed 27 AUG 2026