Skip to content

agustinl/svelte-tags-input

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

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

FAQs

CHANGELOG

License

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

Author

@agustinl

2022