svelte-tags-input

Fully customizable Svelte component to enter tags

Installation

npm install svelte-tags-input

Usage

import Tags from "svelte-tags-input";

<Tags />

Full Example

import Tags from "svelte-tags-input";

let tags = [];

const countryList = [
	"Afghanistan",
	"Albania",
	"Algeria",
	"American Samoa",
	"Andorra",
	"Angola",
	"Anguilla",
	"Antarctica",
	"Antigua and Barbuda",
	"Argentina",
	...
];
</script>

<Tags
	bind:tags={tags}
	addKeys={[9]} // TAB Key
	maxTags={5}
	allowPaste={true}
	allowDrop={true}
	splitWith={"/"}
	onlyUnique={true}
	removeKeys={[27]} // ESC Key
	placeholder={"Enter a country name..."}
	autoComplete={countryList}
	name={"custom-name"}
	id={"custom-id"}
	allowBlur={true}
	disable={false} // Just to illustrate. No need to declare it if it's false.
    readonly={false} // Just to illustrate. No need to declare it if it's false.
	minChars={3}
	onlyAutocomplete={true}
	labelText={"Label Example"}
	labelShow
    onTagClick={tag => alert(tag)}
/>

Label Example

Tags:

Example with autoComplete function


import Tags from "svelte-tags-input";

let tags = [];
            
const customAutocomplete = async () => {
	const list = await fetch('https://restcountries.com/v2/all?fields=name,alpha3Code,flag');
	const res = await list.json();				
	return res;
}
</script>
            
<Tags
	bind:tags={tags}
	autoComplete={customAutocomplete}
	autoCompleteKey={"name"}
    autoCompleteShowKey={"alpha3Code"}
/>
            
{#each tags as country, index}
	<p>{index} - {country.name} </p>
	<img src={country.image} />
{/each}

FAQs

How to override default styles?

Download the css svelte-tags-input-css.css
Create a container for the tag with custom class
Apply your styles in the ways presented below

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

.my-custom-class :global(.svelte-tags-input-tag) {
	background:blue;
}
							
.my-custom-class :global(.svelte-tags-input-layout) {
	background:yellow;
}

A .focus class is available in case you want to override the input focus style.

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

.my-custom-class :global(.svelte-tags-input-tag.focus), .my-custom-class :global(.svelte-tags-input:focus) {
	background:blue;
};

How to reset tags input?

In response to the request #7 for a way to reset the input after submitting a form, for example:

import Tags from "svelte-tags-input";

let tags = [];

function submitForm(event) {
    tags = [];
}

<Tags
	tags={tags}
/>

<button on:click={submitForm}/>Submit</button/>

How to initialize with tags?

Start tag input with preloaded tags

import Tags from "svelte-tags-input";

let tags = ["start", "with", "this", "tags"];

<Tags
	tags={tags}
/>