Spring Tag Input

A tag field where every change moves on a spring: tags grow out of the caret, suggestions fly into the field and removed tags burst into droplets.

About this tool

A tag input with spring motion on every change. A new tag grows out of the caret with a blur that sharpens as it lands, a suggestion flies from its place in the row below into the field, a removed tag pinches and bursts into droplets of its colour while its neighbours close the gap, and a duplicate makes the tag that already holds the value shake. Enter or a comma adds, a pasted list is split on commas, Backspace on an empty field arms the last tag and removes it on the second press, and Escape disarms it. Each tag keeps one colour picked from its text, with every label above 4.5:1 contrast. The field is labelled, the count and changes are announced to screen readers, remove buttons are 44 px targets and motion is skipped under reduced motion. Label, hint, starting tags, suggestions, limit, tag style, colours and bounce are editable live, and the export is one HTML file with no dependencies.

In collections: Form Controls: Switches, Inputs & Selectors Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS / JS All tools

Copy

Label

Hint

Placeholder