svelte-tags-input

Basic REPL Example

Install

``bash
npm install svelte-tags-input --save
`

`javascript
import Tags from "svelte-tags-input";


`

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 |
| autoCompleteFilter | Boolean | true | If false disable auto complete filter and return endpoint response without filter |
| 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 autoComplete list. If 0, autoComplete list shows all results when click on input |
| labelText | String | svelte-tags-input | Custom text for input label |
| labelShow | Boolean | false | If true the label will be visible |

##### A complete list of key codes

Full example

`javascript
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"
...
];

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

`javascript
import Tags from "svelte-tags-input";

let tag = "";

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

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

return res;
}

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

{#each tag as country, index}


{index} - {country.name}

{/each}

FAQs

CHANGELOG

License

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

Author

@agustinl

##### 2022