Newton's Programmatic Measurements
Get unlimited public & private packages + team-based management with npm Teams.Learn more »

svelte-tags-input

1.0.16 • Public • Published

🏷️ 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.

Install

npm i svelte-tags-input

DownloadsWeekly Downloads

34

Version

1.0.16

License

MIT

Unpacked Size

49.1 kB

Total Files

9

Last publish

Collaborators

  • avatar