Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 months 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-06-29T16:00:22.000Z (4 months ago)
- Last Synced: 2024-07-31T05:43:22.811Z (3 months ago)
- Topics: input, javascript, svelte, svelte-tags, tags, ui
- Language: Svelte
- Homepage: https://svelte-tags-input.vercel.app/
- Size: 124 KB
- Stars: 305
- Watchers: 6
- Forks: 34
- Open Issues: 4
-
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