ns-ui / tag-input-tear
- design
- engineering
- growth
- on-call
- p1
Drag a chip down past the perforation to tear it off — release early and it springs back. Delete/Backspace on a focused chip removes it instantly; Ctrl+Z undoes.
ns-ui
Tag input whose chips hang from a perforated edge instead of an x icon: dragging a chip down snaps its dashes into torn stubs top-to-bottom as a 0-1 tear progress crosses each one, and past 80% releasing drops the chip with a 4deg rotate and gravity while siblings close the gap via FLIP; releasing early springs everything back and re-knits the perforation in reverse. Delete/Backspace on a focused chip removes it instantly through a plain 150ms fade, no tear theater, and Ctrl+Z undoes any removal.
Use when removal should be a graded physical commitment the user can abandon halfway, dragging a chip down to tear its perforation dash by dash with a spring-back if released before 80%, while Delete on a focused chip stays an instant no-theater removal with undo; pick tag-input-pull instead for a shorter one-shot stretch-and-detach past a 64px threshold with no partial state to back out of, or tag-input-backspace when the accidental removals happen at the keyboard rather than the pointer.
Install
npx shadcn add https://design.helpmarq.comns-ui / tag-input-tear
Drag a chip down past the perforation to tear it off — release early and it springs back. Delete/Backspace on a focused chip removes it instantly; Ctrl+Z undoes.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultTags? | string[] | — | — |
| placeholder? | string | — | — |
| label? | string | — | accessible name for the chip listbox |
| onChange? | (tags: string[]) => void | — | — |
| className? | string | — | — |