Have ideas to improve npm?Join in the discussion! »

    svelte-tags-input

    2.7.1 • 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

    Basic REPL Example

    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 Number false Set maximum number of tags
    onlyUnique Boolean false Set the entered tags to be unique
    placeholder String false Set a placeholder
    autoComplete Array or fn() false Set an array of elements to create a auto-complete dropdown
    autoCompleteKey String false Set a key to search on autoComplete array of objects
    onlyAutocomplete Boolean false Only accept tags inside the auto complete list
    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

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

    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

    Install

    npm i svelte-tags-input

    DownloadsWeekly Downloads

    257

    Version

    2.7.1

    License

    MIT

    Unpacked Size

    94.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar