Tag Input With Suggestions

Fetch pattern JSON: curl https://webspire.de/patterns/tag-input/with-suggestions.json

with-suggestions.html

<div class="ws-tag-input w-full max-w-md">
  <div class="flex flex-wrap items-center gap-2 rounded-lg border border-[var(--ws-tag-input-border)] bg-[var(--ws-tag-input-bg)] px-3 py-2">
    <span class="inline-flex items-center gap-1 rounded-full bg-[var(--ws-tag-input-accent)] px-3 py-1 text-sm text-[var(--ws-tag-input-text)]">
      Design
      <button type="button" class="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10" aria-label="Remove Design tag">
        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </span>
    <span class="inline-flex items-center gap-1 rounded-full bg-[var(--ws-tag-input-accent)] px-3 py-1 text-sm text-[var(--ws-tag-input-text)]">
      CSS
      <button type="button" class="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10" aria-label="Remove CSS tag">
        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </span>
    <input type="text" placeholder="Add tag..." class="min-w-[120px] flex-1 bg-transparent text-sm text-[var(--ws-tag-input-text)] placeholder:text-[var(--ws-tag-input-text-soft)] outline-none" aria-label="Add new tag" aria-expanded="true" aria-haspopup="listbox" />
  </div>

  <!-- Suggestion dropdown -->
  <div class="mt-1 rounded-lg border border-[var(--ws-tag-input-border)] bg-[var(--ws-tag-input-bg)] p-2 shadow-lg" role="listbox" aria-label="Tag suggestions">
    <p class="mb-1.5 px-2 text-xs font-medium text-[var(--ws-tag-input-text-soft)]">Suggestions</p>
    <button type="button" role="option" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--ws-tag-input-text)] hover:bg-[var(--ws-tag-input-accent)]">
      <svg class="h-3.5 w-3.5 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      React
    </button>
    <button type="button" role="option" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--ws-tag-input-text)] hover:bg-[var(--ws-tag-input-accent)]">
      <svg class="h-3.5 w-3.5 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      TypeScript
    </button>
    <button type="button" role="option" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--ws-tag-input-text)] hover:bg-[var(--ws-tag-input-accent)]">
      <svg class="h-3.5 w-3.5 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      Node.js
    </button>
    <button type="button" role="option" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--ws-tag-input-text)] hover:bg-[var(--ws-tag-input-accent)]">
      <svg class="h-3.5 w-3.5 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      GraphQL
    </button>
  </div>
</div>

Details

Family

tag-input

Tier

enhanced

Kind

component

Extends

tag-input/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

taginputsuggestionsdropdownautocompletetypeahead

Slots

Name	Required	Description
tags	Yes	Existing tag chips with remove buttons.
input	Yes	Text input for filtering and adding tags.
suggestions	Yes	Dropdown list of suggested tags.

Tag input with existing chips (“Design”, “CSS”) and a suggestion dropdown below showing four clickable options (“React”, “TypeScript”, “Node.js”, “GraphQL”). Each suggestion has a plus icon. Uses role="listbox" and role="option" for screen reader support. Static visual — add JS for interactive filtering.