Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including svelte-tags-input with all npm packages installed. Try it out:

var svelteTagsInput = require("svelte-tags-input")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

svelte-tags-input v2.6.5

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

Svelte Tags Input

svelte-tags-input

Svelte tags input is a component to use with Svelte and easily enter tags and customize some options

Basic REPL Example

Install

npm install svelte-tags-input --save
import Tags from "svelte-tags-input";

<Tags />

Options

OptionTypeDefaultDescription
on:tagsFunctionundefinedTo get the values
addKeysArrayENTER 13Set which keys add new values
removeKeysArrayBACKSPACE 8Set which keys remove new values
allowPasteBooleanfalseEnable pasting of a tag or tag group
allowDropBooleanfalseEnable drag and drop of a tag or tag group
splitWithString,Choose what character split you group of tags
Work only if allowDrop or allowPaste are true
maxTagsArrayfalseSet maximum number of tags
onlyUniqueBooleanfalseSet the entered tags to be unique
placeholderStringfalseSet a placeholder
autoCompleteArrayfalseSet an array of elements to create a auto-complete dropdown
nameStringsvelte-tags-inputSet a name attribute
idStringRandom Unique IDSet a id attribute
allowBlurBooleanfalseEnable add tag when input blur
disableBooleanfalseDisable input
minCharsNumber1Minimum length of search text to show auto-complete list
A complete list of key codes

Full example

Full REPL 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={handleTags}
    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}
    name={"custom-name"}
    id={"custom-id"}
    allowBlur={true}
    disable={false} // Just to illustrate. No need to declare it if it's false.
    minChars={3}
/>

FAQs

CHANGELOG

License

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

Author

Agustínl

2020
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free