Live Demo
Install & Usage
npm install svelte-tags-input
import Tags from "svelte-tags-input";
<Tags />
Options
| Option | Type | Default | Description |
|---|---|---|---|
| bind:tags | Array |
[] |
To get the values |
| addKeys | Array |
ENTER 13 | Set which keys add new values |
| removeKeys | Array |
BACKSPACE 8 | Set which keys remove new values |
| allowPaste | Boolean |
false |
Enable pasting of a tag or tag group |
| allowDrop | Boolean |
false |
Enable drag and drop of a tag or tag group |
| splitWith | String |
, | Choose what character split you group of tagsWork only if allowDrop or allowPaste are true |
| maxTags | Number |
false |
Set maximum number of tags |
| onlyUnique | Boolean |
false |
Set the entered tags to be unique |
| placeholder | String |
false |
Set a placeholder |
| autoComplete | Array or fn() |
false |
Set an array of elements to create a auto-complete dropdown |
| autoCompleteKey | String |
false |
Set a key to search on autoComplete array of objects |
| autoCompleteStartFocused | Boolean |
false |
Set the autocomplete focus to the first result without user input |
| autoCompleteFilter | Boolean |
true |
If false disable auto complete filter and return endpoint response without filter |
| onlyAutocomplete | Boolean |
false |
Only accept tags inside the auto complete list |
| name | String |
svelte-tags-input |
Set a name attribute |
| id | String |
Random Unique ID | Set a id attribute |
| allowBlur | Boolean |
false |
Enable add tag when input blur |
| disable | Boolean |
false |
Disable input |
| minChars | Number |
1 |
Minimum length of search text to show autoComplete list. If 0, autoComplete list shows all results when click on input |
| labelText | String |
svelte-tags-input |
Custom text for input label |
| labelShow | Boolean |
false |
If true the label will be visible |
| readonly | Boolean |
false |
If true the input show in display mode |
| onTagClick | Function |
empty |
A function to fire when a tag is clicked |
| autoCompleteShowKey | String |
autoCompleteKey |
A key string to show a different value from auto complete list object returned |
| onTagAdded | Function |
empty |
Get a function to execute when tag added |
| onTagRemoved | Function |
empty |
Get a function to execute when tag removed |
| cleanOnBlur | Boolean |
false |
Clear input on blur (tags keeped) |
| customValidation | Function |
empty |
Create a custom validation when tag is added |
A complete list of key codes
Full example
Live Demo
import Tags from "svelte-tags-input";
let tags = [];
const countryList = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina"
...
];
<Tags
bind:tags={tags}
addKeys={[9]} // TAB Key
maxTags={3}
allowPaste={true}
allowDrop={true}
splitWith={"/"}
onlyUnique={true}
removeKeys={[27]} // ESC Key
placeholder={"Svelte Tags Input full example"}
autoComplete={countryList}
name={"custom-name"}
id={"custom-id"}
allowBlur={true}
disable={false} // Just to illustrate. No need to declare it if it's false.
readonly={false} // Just to illustrate. No need to declare it if it's false.
minChars={3}
onlyAutocomplete
labelText="Label"
labelShow
onTagClick={tag => console.log(tag)}
onTagAdded={(tag, tags) => console.log(tag, tags)}
onTagRemoved={(tag, tags) => console.log(tag, tags)}
cleanOnBlur={true}
customValidation={(tag) => tag === "Argentina" ? true : false }
/>
Example with autoComplete function
Live Demo
import Tags from "svelte-tags-input";
let tags = [];
const customAutocomplete = async () => {
const list = await fetch('https://restcountries.com/v2/all?fields=name,alpha3Code,flag');
const res = await list.json();
return res;
}
<Tags
bind:tags={tags}
autoComplete={customAutocomplete}
autoCompleteKey={"name"}
autoCompleteShowKey={"alpha3Code"}
/>
{#each tags as country, index}
<p>{index} - {country.name} - {country.alpha3Code} </p>
<img src={country.flag} />
{/each}
FAQs
CHANGELOG
License
This project is open source and available under the MIT License.