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">×</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">×</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 |