https://github.com/agustinl/svelte-tags-input

Fully customizable Svelte component to enter tags
https://github.com/agustinl/svelte-tags-input

input javascript svelte svelte-tags tags ui

Last synced: about 1 month ago
JSON representation

Fully customizable Svelte component to enter tags

• Host: GitHub
• URL: https://github.com/agustinl/svelte-tags-input
• Owner: agustinl
• License: mit
• Created: 2020-01-07T22:53:14.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-24T10:59:09.000Z (3 months ago)
• Last Synced: 2024-11-08T07:45:03.954Z (about 2 months ago)
• Topics: input, javascript, svelte, svelte-tags, tags, ui
• Language: Svelte
• Homepage: https://svelte-tags-input.vercel.app/
• Size: 144 KB
• Stars: 310
• Watchers: 6
• Forks: 33
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        




    svelte-tags-input



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














## [Live Demo](https://svelte-tags-input.vercel.app/)

## Install & Usage

```bash

npm install svelte-tags-input

```

```javascript

import Tags from "svelte-tags-input";

```

## Options

| Option | Type | Default | Description |

| --- | --- | --- | --- |

| bind:tags | `Array` | `[]` | 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 |

| readonly | `Boolean` | `false` | If `true` the input show in display mode |

| onTagClick | `Function` | `empty` | A function to fire when a tag is clicked |

| autoCompleteShowKey | `String` | `autoCompleteKey` | A key string to show a different value from auto complete list object returned |

| onTagAdded | `Function` | `empty` | Get a function to execute when tag added |

| onTagRemoved | `Function` | `empty` | Get a function to execute when tag removed |

| cleanOnBlur | `Boolean` | `false` | Clear input on blur (tags keeped) |

| customValidation | `Function` | `empty` | Create a custom validation when tag is added |

##### [A complete list of key codes](https://keycode.info/)

## Full example

### [Live Demo](https://svelte-tags-input.vercel.app/)  

```javascript

import Tags from "svelte-tags-input";

let tags = [];

const countryList = [

    "Afghanistan",

    "Albania",

    "Algeria",

    "American Samoa",

    "Andorra",

    "Angola",

    "Anguilla",

    "Antarctica",

    "Antigua and Barbuda",

    "Argentina"

    ...

];

 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](https://svelte-tags-input.vercel.app/)  

```javascript

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;

}

{#each tags as country, index}

    
{index} - {country.name} - {country.alpha3Code} 

    

{/each}

```


## [FAQs](https://svelte-tags-input.vercel.app)

## [CHANGELOG](CHANGELOG.md)

## License

This project is open source and available under the [MIT License](LICENSE).

## Author

[Agustín](https://twitter.com/agustinlautaro)

##### 2024