svelte-tags-input

Fully customizable Svelte component to enter tags.

Usage no npm install needed!

<script type="module">
  import svelteTagsInput from 'https://cdn.skypack.dev/svelte-tags-input';
</script>

README

Svelte Tags Input

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
labelText String svelte-tags-input Custom text for input label
labelShow Boolean false If true the label will be visible
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}
    onlyAutocomplete
    labelText="Label"
    labelShow
/>

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