Tag Input Chips
Text input that turns Enter or comma into a chip: chips pop in with a spring, collapse their width on removal and shake when a duplicate is typed.
About This Component
A tag field that turns typed text into chips on Enter or comma. Each chip springs in from zero width, so its neighbours slide across to make room, and collapses the same way when it is removed. Typing a tag that already exists shakes the matching chip instead of adding a second copy.
Read the full effect overview
A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP core, no framework and no plugins. Ships in three looks, vault, paper and brutal, switched with one data-variant attribute; the script is identical in all three.
What's Included
- Enter or comma commits the typed text as a chip
- Chips spring in from zero width, so neighbours slide rather than jump
- Removing a chip collapses its width and closes the gap
- Duplicate tags shake the existing chip instead of adding a copy
- Backspace on an empty input removes the last chip
- Max count shakes the field and refuses the entry
- Hidden input keeps the comma-separated value ready for form submit
- Three shipped variants: vault, paper, brutal
Perfect For
- Skill, topic and interest pickers on profile forms
- Filter and label builders in dashboards
- Recipient fields on invite and share dialogs
- Keyword entry on upload and publishing screens
How It Works
Width springs, not opacity fades
A new chip is inserted, measured at its natural width, then set to zero width and tweened out to that measurement while its scale runs a separate back.out spring. Because the chip owns its right margin and the box model is border-box, the collapse to zero also swallows the padding, so the neighbouring chips slide instead of stepping.
Duplicate refusal
Committed values are compared case-insensitively. A repeat runs a short elastic x shake on the matching chip and flashes its background to the colour read from the --chip-warn custom property, so the answer to the keystroke is the chip that already holds that value.
Keyboard first
The field is a native text input with real buttons for each chip remove control. Enter and comma commit, Backspace on an empty input removes the last chip, and every chip button is reachable with Tab and shows a visible focus ring.