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 | | 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.

Author

Agustín

2024