svelte-tags-input

Svelte tags input is a component to use with Svelte and easily enter tags and customize some options

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