Skip to content
Svelte tags input is a component to use with Svelte and easily enter tags and customize some functions.
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore Added paste or drop tag or group of tags Jan 29, 2020
CHANGELOG.md
LICENSE
README.md Added paste or drop tag or group of tags Jan 29, 2020
package-lock.json Add CHANGELOG Jan 28, 2020
package.json
rollup.config.js Launch Jan 8, 2020

README.md

🏷️ svelte-tags-input

License: MIT License: MIT

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

Example

Live Demo

Install

npm install svelte-tags-input --save
import Tags from "svelte-tags-input";

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

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

<Tags />

Props

on:tags

To get the values.

e.g. on:tags={handleTags} or on:tags={getTags}

dont change on:tags

addKeys

You can set which keys add new values.

e.g. addKeys={[9]} or addKeys={[9,188]}

default: 13 (enter)

removeKeys

You can set which keys remove new values.

e.g. removeKeys={[9]} or removeKeys={[9,188]}

default: 8 (backspace)

allowPaste

You can paste an tag or group of tags.

e.g. allowPaste={true}

default: false

allowDrop

You can drop an tag or group of tags.

e.g. allowDrop={true}

default: false

splitWith

You can choose what character split you group of tags (on paster or drop). Work only if allowDrop or allowPaste are true

e.g. splitWith={"/"}

default: split with ,

maxTags

You can set maximum number of tags.

e.g. maxTags={[3]}

default: false (infinite)

onlyUnique

You can set the entered tags to be unique.

e.g. onlyUnique={true}

default: false

placeholder

You can set a placeholder.

e.g. placeholder={"Svelte Tags Input"}

default: empty

<Tags
    on:tags={handleTagProperties}
    addKeys={[9]} // TAB Key
    maxTags={3}
    allowPaste={true}
    allowDrop={true}
    splitWith={"/"}
    onlyUnique={true}
    removeKeys={[27]} // ESC Key
    placeholder={"Svelte Tags Input"}
/>

CSS

Download CSS file

Author

Agustínl

Inspired in react-tagsinput

License

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

You can’t perform that action at this time.