sti

svelte-tags-input

Fully customizable Svelte component to enter tags

Showing:

Popularity

Downloads/wk

465

GitHub Stars

160

Maintenance

Last Commit

4mos ago

Contributors

5

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Svelte Tags

Readme

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
maxTagsNumberfalseSet maximum number of tags
onlyUniqueBooleanfalseSet the entered tags to be unique
placeholderStringfalseSet a placeholder
autoCompleteArray or fn()falseSet an array of elements to create a auto-complete dropdown
autoCompleteKeyStringfalseSet a key to search on autoComplete array of objects
onlyAutocompleteBooleanfalseOnly accept tags inside the auto complete list
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
labelTextStringsvelte-tags-inputCustom text for input label
labelShowBooleanfalseIf true the label will be visible
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}
    onlyAutocomplete
    labelText="Label"
    labelShow
/>

Example with autoComplete function

REPL Example

import Tags from "svelte-tags-input";

let tag = "";

function handleTags(event) {
    tag = event.detail.tags;
}

const customAutocomplete = async () => {
    const list = await fetch('https://restcountries.eu/rest/v2/all?fields=name;flag');
    const res = await list.json();

    return res;
}

<Tags
    on:tags={handleTags}
    autoComplete={customAutocomplete}
    autoCompleteKey={"name"}
/>

{#each tag as country, index}
    <p>{index} - {country.name} </p>
    <img src={country.flag} />
{/each}

FAQs

CHANGELOG

License

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

Author

Agustínl

2021

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial