Loading…
Live component · try it
Freeinput · type · light
Tag Input
A field that turns typed words into chips: Enter or comma commits a tag, Backspace on an empty field pulls the last chip back into the text, duplicates shake instead of adding, and a suggestion list filters as you type with arrow-key selection. Chips pop in with a small scale.
The mechanic
Commit: trim, lowercase-compare against existing tags, reject duplicates with a 0.3 s shake on the matching chip, else append a chip with a `pop` keyframe (scale 0.6 → 1, 0.2 s). Backspace on empty text removes the last chip and puts its label back in the input. Suggestions: filter by prefix, show up to 5, ArrowUp/Down + Enter pick.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
