@cwlogo/svelte-tags-input NPM

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

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.com/v2/all?fields=name,alpha3Code,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}