ns-ui

Tag Input Backspace

Tag input where Backspace on an empty field arms the last tag with a depleting bar instead of deleting it — a second Backspace inside the window removes it.

Use when fast typists over-backspace and destroy tags they meant to keep, so an empty-field Backspace arms the last tag with a depleting 2s bar and only a second Backspace inside that window removes it; pick tag-input-pull instead when removal should cost a deliberate gesture at the chip itself rather than a keyboard grace period, or tag-input-cord when the moment worth designing is the commit rather than the removal.

Install

npx shadcn add https://design.helpmarq.com/r/tag-input-backspace.json
  • input
  • tags
  • form
  • keyboard
  • undo
  • micro-interaction

ns-ui / tag-input-backspace — backspace arms, it doesn't delete

design-systemsaccessibilityreacttokensmotion

Press Enter to add · 5 / 8

Props

PropTypeDefaultDescription
labelstring—Required. Rendered as a real <label> bound to the input.
value?string[]—Controlled tag list. Presence of this prop decides the mode, once.
defaultValue?string[]—Initial tag list when uncontrolled.
onChange?(tags: string[]) => void——
placeholder?string—Shown only while the field is empty. Default "Add a tag…".
max?number—Hard cap on tag count. No default — unlimited.
allowDuplicates?boolean——
validate?(raw: string) => string | null—Return the normalized value to accept, or null to reject the entry.
commitKeys?string[]—Keys that commit the draft. Default ["Enter", ","].
armDuration?number—ms the armed tag stays armed. Default 2000.
disabled?boolean——
id?string——
className?string——
Back to the catalog