Tag Input

Multi-tag input field with removable tags, suggestions dropdown, color variants, and sizes.

Basic Tag Input

Preview

JavaScript TypeScript React

<div class="tag-input">
  <span class="tag">
    <span class="tag-text">JavaScript</span>
    <button class="tag-remove">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
  </span>
  <span class="tag">
    <span class="tag-text">TypeScript</span>
    <button class="tag-remove">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
  </span>
  <span class="tag">
    <span class="tag-text">React</span>
    <button class="tag-remove">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
  </span>
  <input class="tag-input-field" placeholder="Add tag..." />
</div>

Requires: ux.min.css

<div class="flex flex-wrap items-center gap-1 min-h-[44px] p-1 bg-base-100 border border-base-300 rounded-box cursor-text focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15">
  <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-primary/10 text-primary border border-primary/20 rounded-full">
    <span>JavaScript</span>
    <button class="flex items-center justify-center size-4 bg-transparent border-none rounded-full cursor-pointer opacity-70 hover:opacity-100">&times;</button>
  </span>
  <!-- more tags... -->
  <input class="flex-1 min-w-[80px] h-7 px-1 text-[0.9375rem] bg-transparent border-none outline-none" placeholder="Add tag..." />
</div>

Requires: tw.min.css

// Add tag on Enter:
// input.addEventListener('keydown', (e) => {
//   if (e.key === 'Enter' && input.value.trim()) {
//     addTag(input.value.trim());
//     input.value = '';
//   }
//   if (e.key === 'Backspace' && !input.value) {
//     removeLastTag();
//   }
// });

Tag Colors

Preview

Default Success Warning Error Neutral

<div class="tag-input">
  <span class="tag"><span class="tag-text">Default</span></span>
  <span class="tag tag-success"><span class="tag-text">Success</span></span>
  <span class="tag tag-warning"><span class="tag-text">Warning</span></span>
  <span class="tag tag-error"><span class="tag-text">Error</span></span>
  <span class="tag tag-neutral"><span class="tag-text">Neutral</span></span>
  <input class="tag-input-field" placeholder="Add..." />
</div>

Requires: ux.min.css

<div class="flex flex-wrap items-center gap-1 min-h-11 p-1 bg-base-100 border border-base-300 rounded-box cursor-text focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15">
  <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-primary/10 text-primary border border-primary/20 rounded-full">
    <span>Default</span>
  </span>
  <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-success/10 text-success border border-success/20 rounded-full">
    <span>Success</span>
  </span>
  <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-warning/10 text-warning border border-warning/20 rounded-full">
    <span>Warning</span>
  </span>
  <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-error/10 text-error border border-error/20 rounded-full">
    <span>Error</span>
  </span>
  <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-base-200 text-base-content border border-base-300 rounded-full">
    <span>Neutral</span>
  </span>
  <input class="flex-1 min-w-20 h-7 px-1 text-[0.9375rem] bg-transparent border-none outline-none" placeholder="Add..." />
</div>

Requires: tw.min.css

// No JavaScript required for static display

With Suggestions

Preview

Vue

React

React Native

Remix

Create "re"

<div class="tag-input-wrapper">
  <div class="tag-input">
    <span class="tag">
      <span class="tag-text">Vue</span>
      <button class="tag-remove"><svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
    </span>
    <input class="tag-input-field" placeholder="Search frameworks..." value="re" />
  </div>
  <div class="tag-input-suggestions tag-input-suggestions-open">
    <div class="tag-input-suggestion tag-input-suggestion-active">React</div>
    <div class="tag-input-suggestion">React Native</div>
    <div class="tag-input-suggestion">Remix</div>
    <div class="tag-input-suggestion tag-input-suggestion-create">Create "re"</div>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-block w-full">
  <div class="flex flex-wrap items-center gap-1 min-h-11 p-1 bg-base-100 border border-primary rounded-box cursor-text ring-3 ring-primary/15">
    <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-primary/10 text-primary border border-primary/20 rounded-full">
      <span>Vue</span>
      <button class="flex items-center justify-center size-4 bg-transparent border-none rounded-full cursor-pointer opacity-70 hover:opacity-100">&times;</button>
    </span>
    <input class="flex-1 min-w-20 h-7 px-1 text-[0.9375rem] bg-transparent border-none outline-none" placeholder="Search frameworks..." value="re" />
  </div>
  <div class="absolute top-full left-0 right-0 z-100 mt-1 py-1 bg-base-100 border border-base-300 rounded-box shadow-lg">
    <div class="flex items-center gap-2 min-h-9 px-3 text-sm cursor-pointer bg-primary/10 text-primary font-medium">React</div>
    <div class="flex items-center gap-2 min-h-9 px-3 text-sm cursor-pointer hover:bg-base-200">React Native</div>
    <div class="flex items-center gap-2 min-h-9 px-3 text-sm cursor-pointer hover:bg-base-200">Remix</div>
    <div class="flex items-center gap-2 min-h-9 px-3 text-sm cursor-pointer hover:bg-base-200 text-base-content/60 italic">Create "re"</div>
  </div>
</div>

Requires: tw.min.css

// Filter suggestions based on input value
// Show/hide: suggestions.classList.toggle('tag-input-suggestions-open');
// Keyboard nav: arrow keys to highlight, Enter to select

States & Sizes

Preview

Small

Large

Invalid

Locked

<!-- Small -->
<div class="tag-input tag-input-sm mb-4">
  <span class="tag"><span class="tag-text">Small</span></span>
  <input class="tag-input-field" placeholder="Small..." />
</div>

<!-- Large -->
<div class="tag-input tag-input-lg mb-4">
  <span class="tag"><span class="tag-text">Large</span></span>
  <input class="tag-input-field" placeholder="Large..." />
</div>

<!-- Error -->
<div class="tag-input tag-input-error mb-4">
  <span class="tag tag-error"><span class="tag-text">Invalid</span></span>
  <input class="tag-input-field" placeholder="Fix tags..." />
</div>

<!-- Disabled -->
<div class="tag-input tag-input-disabled">
  <span class="tag"><span class="tag-text">Locked</span></span>
  <input class="tag-input-field" placeholder="Disabled..." disabled />
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4">
  <!-- Small -->
  <div class="flex flex-wrap items-center gap-1 min-h-9 p-0.5 bg-base-100 border border-base-300 rounded-box cursor-text focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15">
    <span class="inline-flex items-center gap-1 h-6 px-2 text-xs font-medium bg-primary/10 text-primary border border-primary/20 rounded-full">Small</span>
    <input class="flex-1 min-w-20 h-6 px-1 text-sm bg-transparent border-none outline-none" placeholder="Small..." />
  </div>
  <!-- Large -->
  <div class="flex flex-wrap items-center gap-1.5 min-h-13 p-1.5 bg-base-100 border border-base-300 rounded-box cursor-text focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15">
    <span class="inline-flex items-center gap-1 h-8 px-3 text-sm font-medium bg-primary/10 text-primary border border-primary/20 rounded-full">Large</span>
    <input class="flex-1 min-w-20 h-8 px-1 text-base bg-transparent border-none outline-none" placeholder="Large..." />
  </div>
  <!-- Error -->
  <div class="flex flex-wrap items-center gap-1 min-h-11 p-1 bg-base-100 border border-error rounded-box cursor-text ring-3 ring-error/15">
    <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-error/10 text-error border border-error/20 rounded-full">Invalid</span>
    <input class="flex-1 min-w-20 h-7 px-1 text-[0.9375rem] bg-transparent border-none outline-none" placeholder="Fix tags..." />
  </div>
  <!-- Disabled -->
  <div class="flex flex-wrap items-center gap-1 min-h-11 p-1 bg-base-200 border border-base-300 rounded-box opacity-60 pointer-events-none">
    <span class="inline-flex items-center gap-1 h-7 px-2 text-[0.8125rem] font-medium bg-primary/10 text-primary border border-primary/20 rounded-full">Locked</span>
    <input class="flex-1 min-w-20 h-7 px-1 text-[0.9375rem] bg-transparent border-none outline-none" placeholder="Disabled..." disabled />
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for states

Class	Description
`.tag-input`	Container with flex-wrap
`.tag-input-field`	Text input field
`.tag`	Tag pill (inside tag-input)
`.tag-text`	Tag label (truncated)
`.tag-remove`	Remove button (X)
`.tag-success/warning/error/neutral`	Tag color variants
`.tag-removing`	Remove animation state
`.tag-input-sm`	Small size
`.tag-input-lg`	Large size
`.tag-input-error`	Error state (red border)
`.tag-input-disabled`	Disabled state
`.tag-input-counter`	Tag count display
`.tag-input-wrapper`	Wrapper for suggestions dropdown
`.tag-input-suggestions`	Suggestions dropdown
`.tag-input-suggestions-open`	Visible suggestions
`.tag-input-suggestion`	Suggestion item
`.tag-input.glass`	Glass morphism variant