View a demo page.

Installation:

npm i -D @beyonk/svelte-tag-input

There are a couple of properties you can pass to the tag input:

An array containing preexisting tags for the input. Bind to this to keep your array up to date with changes:

<script>
  let myTags = [ 'foo', 'bar' ]
</script>
<TagInput bind:tags={myTags}>

A function which takes the tag content as the only parameter and uses it to generate a CSS colour. The default function creates a hashcode from the tag content and creates a pastel colour based on it.

The delimiter which, when pressed, will create a new tag from the current content. Duplicate tags are not added.