6.0.0 • Published 3 months ago

svelte-tags-input v6.0.0

Weekly downloads
316
License
MIT
Repository
github
Last release
3 months ago

Live Demo

Install & Usage

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

<Tags />

Options

OptionTypeDefaultDescription
bind:tagsArray[]To 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 tagsWork 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
autoCompleteFilterBooleantrueIf false disable auto complete filter and return endpoint response without filter
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 autoComplete list. If 0, autoComplete list shows all results when click on input
labelTextStringsvelte-tags-inputCustom text for input label
labelShowBooleanfalseIf true the label will be visible
readonlyBooleanfalseIf true the input show in display mode
onTagClickFunctionemptyA function to fire when a tag is clicked
autoCompleteShowKeyStringautoCompleteKeyA key string to show a different value from auto complete list object returned
onTagAddedFunctionemptyGet a function to execute when tag added
onTagRemovedFunctionemptyGet a function to execute when tag removed
cleanOnBlurBooleanfalseClear input on blur (tags keeped)
customValidationFunctionemptyCreate a custom validation when tag is added
A complete list of key codes

Full example

Live Demo

import Tags from "svelte-tags-input";

let tags = [];

const countryList = [
    "Afghanistan",
    "Albania",
    "Algeria",
    "American Samoa",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antarctica",
    "Antigua and Barbuda",
    "Argentina"
    ...
];

<Tags
    bind:tags={tags}
    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.
    readonly={false} // Just to illustrate. No need to declare it if it's false.
    minChars={3}
    onlyAutocomplete
    labelText="Label"
    labelShow
    onTagClick={tag => console.log(tag)}
    onTagAdded={(tag, tags) => console.log(tag, tags)}
    onTagRemoved={(tag, tags) => console.log(tag, tags)}
	cleanOnBlur={true}
	customValidation={(tag) => tag === "Argentina" ? true : false }
/>

Example with autoComplete function

Live Demo

import Tags from "svelte-tags-input";

let tags = [];

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

    return res;
}

<Tags
    bind:tags={tags}
    autoComplete={customAutocomplete}
    autoCompleteKey={"name"}
    autoCompleteShowKey={"alpha3Code"}
/>

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

FAQs

CHANGELOG

License

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

Author

Agustín

2024
6.0.0

3 months ago

5.0.0

1 year ago

4.0.0

1 year ago

3.0.0

2 years ago

2.9.2

2 years ago

2.9.1

2 years ago

2.9.0

2 years ago

2.8.1

3 years ago

2.8.0

3 years ago

2.7.1

3 years ago

2.7.0

3 years ago

2.6.5

4 years ago

2.6.4

4 years ago

2.6.1

4 years ago

2.6.0

4 years ago

2.6.3

4 years ago

2.6.2

4 years ago

2.5.1

4 years ago

2.5.0

4 years ago

2.4.0

4 years ago

2.3.0

4 years ago

2.3.1

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.0

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.2

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago