Tag Input Form
Form with a tag input showing existing chips, an inline suggestion list on partial match, a create new tag option, and a per-project tag limit note.
Form with a tag input showing existing chips, an inline suggestion list on partial match, a create new tag option, and a per-project tag limit note.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the project tagging field. Other tag input contexts:
Tip: the Create tag option in the suggestion list is what makes the input feel complete rather than locked.