Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

svelte-tags-input

2.6.3 • Public • Published

Svelte Tags Input

svelte-tags-input

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

Example

Live Demo

Install

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

Options

Option Type Default Description
on:tags Function undefined To get the values
addKeys Array ENTER 13 Set which keys add new values
removeKeys Array BACKSPACE 8 Set which keys remove new values
allowPaste Boolean false Enable pasting of a tag or tag group
allowDrop Boolean false Enable drag and drop of a tag or tag group
splitWith String , Choose what character split you group of tags
Work only if allowDrop or allowPaste are true
maxTags Array false Set maximum number of tags
onlyUnique Boolean false Set the entered tags to be unique
placeholder String false Set a placeholder
autoComplete Array false Set an array of elements to create a auto-complete dropdown
name String svelte-tags-input Set a name attribute
id String Random Unique ID Set a id attribute
allowBlur Boolean false Enable add tag when input blur
disable Boolean false Disable input
minChars Number 1 Minimum length of search text to show auto-complete list
A complete list of key codes

Full example

Live Full Example Demo

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

Install

npm i svelte-tags-input

DownloadsWeekly Downloads

153

Version

2.6.3

License

MIT

Unpacked Size

81.4 kB

Total Files

8

Last publish

Collaborators

  • avatar