MeerBiene/svelte-tags-input

Fully customizable Svelte component to enter tags

svelte-tags-input

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

Basic REPL Example

Install

npm install svelte-tags-input --save

import Tags from "svelte-tags-input";

<Tags />

Options

Option	Type	Default	Description
on:tags	Function	undefined	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
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 auto-complete list

A complete list of key codes

Full example

Full REPL Example

import Tags from "svelte-tags-input";

// If on:tags is defined
let tag = "";

function handleTags(event) {
    tag = event.detail.tags;
}

const countryList = [
    "Afghanistan",
    "Albania",
    "Algeria",
    "American Samoa",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antarctica",
    "Antigua and Barbuda",
    "Argentina"
    ...
];

<Tags
    on:tags={handleTags}
    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.
    minChars={3}
/>

Example with autoComplete function

REPL Example

import Tags from "svelte-tags-input";

let tag = "";

function handleTags(event) {
    tag = event.detail.tags;
}

const customAutocomplete = async () => {
    const list = await fetch('https://restcountries.eu/rest/v2/all?fields=name;flag');
    const res = await list.json();

    return res;
}

<Tags
    on:tags={handleTags}
    autoComplete={customAutocomplete}
    autoCompleteKey={"name"}
/>

{#each tag as country, index}
    <p>{index} - {country.name} </p>
    <img src={country.flag} />
{/each}

FAQs

CHANGELOG

License

This project is open source and available under the MIT License.

Author

Agustínl

2021