🏷️ 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}
on:tags
dont change 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
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
License
This project is open source and available under the MIT License.