tag input chip pill token label multi-select tag input chip pill token label multi-select removable add tag input with chips multi-value text input
Tag Input Base
Fetch pattern JSON:
curl https://webspire.de/patterns/tag-input/base.json base.html
<div class="ws-tag-input 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)]">
Development
<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 Development 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)]">
Marketing
<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 Marketing 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" />
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
taginputchippilltokenlabelmulti-select
Slots
| Name | Required | Description |
|---|---|---|
| tags | Yes | Tag chip elements with remove buttons. |
| input | Yes | Inline text input for adding new tags. |
Bordered container with three tag chips (“Design”, “Development”, “Marketing”) each showing an X remove button, plus an inline text input placeholder. Tags wrap responsively and use --ws-tag-input-accent for chip background color.