Svelte Tag Input

Beyonk Tag Input

Demo

View a demo page.

Usage

Installation:

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

Props

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

tags

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}>

colour={function}

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.

delimiter

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