happybeing / svelte-tags-input

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

🏷️ svelte-tags-input

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

<Tags />

Props

on:tags

To get the values. How to modify the current list of tags?

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

---

autoComplete

You can set an array of elements to create a autocomplete dropdown.

e.g. autoComplete={myArrayOfElements}

default: false

---

Full 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={handleTagProperties}
    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}
/>

CSS

Download CSS file

How to override tag styles?

<div  class="my-custom-class"> 
    <Tags /> 
</div>

<style>
.my-custom-class :global(.svelte-tags-input-tag) {
    background:blue;
}

.my-custom-class :global(.svelte-tags-input-layout) {
    background:yellow;
}
</style>

Author

Agustínl

License

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