About this block

Tag Input Form is the edit-project-details form for Checkout Redesign, pairing a project name field and a status Select with a tag input that shows existing tags as removable chips: frontend, checkout, and q2-2026. A typed partial match of pay reveals an inline suggestion list with payments highlighted, api, and design-system, plus a Create tag row at the bottom so the user can coin a new tag without leaving the field. A helper note states the limit of 10 tags per project and that tags are shared across the workspace and searchable from the project list.

existingTags and suggestions are two small const arrays. The inline suggestion list is static markup; wire it to a filtered query in production. The chips-plus-input layout avoids a separate multi-select dropdown and keeps the current state visible at all times.

When to use

Reach for this block on any form where users assign free-form labels to a resource, wired to your tag autocomplete endpoint and save handler. Render the suggestion list only when the input has a value; an unprompted list on focus is noise.

A natural flow around it on an Application Pro page:

Before

• App shell

After

• Data tables
• Filters and search

What you can display

One strong use is the project tagging field. Other tag input contexts:

• Issue labels. Colored label chips from a workspace palette with a color dot before each label name.
• Skill tags. The same pattern on a profile form with endorsement counts beside each chip.
• Channel topics. Freeform tags on a chat channel settings form with a shorter limit and a character cap.

Tip: the Create tag option in the suggestion list is what makes the input feel complete rather than locked.