Svelte Tags Input
Fully customizable Svelte component to enter tags
svelte-tags-input
A fully customizable tags input component for Svelte 5
Features
- Keyboard-driven — Add tags with Enter/Tab, remove with Backspace, navigate autocomplete with Arrow keys
- Autocomplete — Array or async function, with filtering and custom display keys
- Paste & drop — Paste comma-separated text or drag-and-drop tags
- Accessible — ARIA-friendly, screen reader labels, keyboard navigation
- Flexible — Max tags, unique-only, custom validation, blur behavior
- Svelte 5 — Built with runes (
$props,$state,$derived,$bindable)
Requirements
- Svelte 5.x — This package requires Svelte 5 (peer dependency)
Install
npm install svelte-tags-input
Quick Start
<script>
import Tags from 'svelte-tags-input';
let tags = $state([]);
</script>
<Tags bind:tags placeholder="Type and press Enter..." />
Options
| Prop | Type | Default | Description |
|---|---|---|---|
bind:tags |
Array |
[] |
Two-way bound array of tags |
addKeys |
number[] |
[13] (Enter) |
Keys that add a tag |
removeKeys |
number[] |
[8] (Backspace) |
Keys that remove the last tag |
placeholder |
string |
'' |
Input placeholder text |
maxTags |
number | false |
false |
Maximum number of tags allowed |
onlyUnique |
boolean |
false |
Reject duplicate tags |
allowPaste |
boolean |
false |
Enable pasting tags (split by splitWith) |
allowDrop |
boolean |
false |
Enable drag-and-drop of tags |
splitWith |
string |
',' |
Character to split pasted/dropped text |
autoComplete |
Array | (value: string) => any |
false |
Suggestions array or async fetcher |
autoCompleteKey |
string |
false |
Key for object items in autoComplete |
autoCompleteShowKey |
string |
autoCompleteKey |
Key to display (when different from search key) |
autoCompleteFilter |
boolean |
true |
Filter suggestions client-side (disable for API responses) |
autoCompleteStartFocused |
boolean |
false |
Focus first suggestion without typing |
onlyAutocomplete |
boolean |
false |
Only accept tags from the autocomplete list |
minChars |
number |
1 |
Min chars before showing autocomplete (0 = show all on click) |
allowBlur |
boolean |
false |
Add tag on input blur |
cleanOnBlur |
boolean |
false |
Clear input on blur (tags kept) |
disable |
boolean |
false |
Disable the input |
readonly |
boolean |
false |
Read-only display mode |
name |
string |
'svelte-tags-input' |
Input name attribute |
id |
string |
random | Input id attribute |
labelText |
string |
name |
Accessible label text |
labelShow |
boolean |
false |
Show visible label |
onTagAdded |
(tag, tags) => void |
() => {} |
Called when a tag is added |
onTagRemoved |
(tag, tags) => void |
() => {} |
Called when a tag is removed |
onTagClick |
(tag) => void |
() => {} |
Called when a tag is clicked |
customValidation |
(tag) => boolean |
false |
Custom validation before adding |
Examples
Basic with autocomplete
<script>
import Tags from 'svelte-tags-input';
let tags = $state([]);
const suggestions = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
</script>
<Tags
bind:tags
placeholder="Pick a fruit..."
autoComplete={suggestions}
onlyUnique
/>
Full configuration
<script>
import Tags from 'svelte-tags-input';
let tags = $state([]);
const countries = ['Argentina', 'Brazil', 'Chile', 'Colombia', 'Mexico'];
</script>
<Tags
bind:tags
addKeys={[9]}
removeKeys={[27]}
maxTags={5}
allowPaste
allowDrop
splitWith="/"
onlyUnique
placeholder="Add a country..."
autoComplete={countries}
minChars={2}
onlyAutocomplete
allowBlur
cleanOnBlur
labelText="Countries"
labelShow
onTagAdded={(tag, t) => console.log('Added:', tag, t)}
onTagRemoved={(tag, t) => console.log('Removed:', tag, t)}
onTagClick={(tag) => console.log('Clicked:', tag)}
customValidation={(tag) => tag.length >= 3}
/>
Async autocomplete (API)
<script>
import Tags from 'svelte-tags-input';
let tags = $state([]);
async function fetchCountries(query) {
const res = await fetch(
`https://restcountries.com/v2/name/${query}?fields=name,alpha3Code,flag`
);
const data = await res.json();
return data;
}
</script>
<Tags
bind:tags
autoComplete={fetchCountries}
autoCompleteKey="name"
autoCompleteShowKey="alpha3Code"
autoCompleteFilter={false}
/>
License
MIT © Agustín
