npm install svelte-tags-input --save
import Tags from "svelte-tags-input";
<Tags />
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 tags Work 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 |
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 |
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)}
/>
autoComplete
functionimport 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}
This project is open source and available under the MIT License.