127 Components
Elastic Tag Input
InputsTokenized multi-tag input with Hooke's Law pill pop-in, FLIP layout reflow, and a two-step Backspace warning wiggle before deletion.
Registry Keywords3/8 tags
#framer-motion#spring-physics#shadcn-v2
Press Enter to add • Press Backspace twice to confirm removal
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/elastic-tag-input.json"
Props
TypeScript props supported by <ElasticTagInput />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultTags | string[] | ["framer-motion", "spring-physics", "shadcn-v2"] | Initial list of keyword tags rendered inside the field. |
| maxTags | number | 8 | Maximum number of tags allowed before locking the input. |
| stiffness | number | 380 | Hooke's Law spring stiffness for tag pop-in and layout reflow. |
| damping | number | 24 | Spring damping coefficient controlling pill settle. |
| placeholder | string | — | Placeholder text displayed in the tag input field |
| onChange | (tags: string[]) => void | — | Callback fired whenever the list of tags updates |
Key Features
- Automatic FLIP layout reflow across remaining pills when a tag is inserted or removed.
- Two-press Backspace safety that highlights and wiggles the last tag before deleting it.
- Normalizes whitespace into clean kebab-case tokens automatically.
Keyboard & Accessibility
- Each tag pill includes a dedicated button with aria-label='Remove tag X'.
- Supports Enter and comma keys to commit new tags and Backspace to remove.
- Disables scale pop-in and warning wiggle when prefers-reduced-motion is active.