{"id":13810461,"url":"https://github.com/agustinl/svelte-tags-input","last_synced_at":"2025-05-14T10:33:29.715Z","repository":{"id":36943196,"uuid":"232432577","full_name":"agustinl/svelte-tags-input","owner":"agustinl","description":"Fully customizable Svelte component to enter tags","archived":false,"fork":false,"pushed_at":"2025-01-07T00:12:56.000Z","size":160,"stargazers_count":316,"open_issues_count":9,"forks_count":35,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-10T20:18:19.898Z","etag":null,"topics":["input","javascript","svelte","svelte-tags","tags","ui"],"latest_commit_sha":null,"homepage":"https://svelte-tags-input.vercel.app/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agustinl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-07T22:53:14.000Z","updated_at":"2025-04-10T13:18:53.000Z","dependencies_parsed_at":"2024-11-19T03:45:57.506Z","dependency_job_id":null,"html_url":"https://github.com/agustinl/svelte-tags-input","commit_stats":{"total_commits":136,"total_committers":10,"mean_commits":13.6,"dds":"0.19852941176470584","last_synced_commit":"815a2430f74026bad8a844051d85662d3c6a2f05"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinl%2Fsvelte-tags-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinl%2Fsvelte-tags-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinl%2Fsvelte-tags-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinl%2Fsvelte-tags-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agustinl","download_url":"https://codeload.github.com/agustinl/svelte-tags-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253627364,"owners_count":21938484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["input","javascript","svelte","svelte-tags","tags","ui"],"created_at":"2024-08-04T02:00:54.416Z","updated_at":"2025-05-14T10:33:29.690Z","avatar_url":"https://github.com/agustinl.png","language":"Svelte","funding_links":[],"categories":["Svelte"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://svelte-tags-input.vercel.app\"\u003e\u003cimg src=\"https://svelte-tags-input.vercel.app/readme-image.png\" alt=\"Svelte Tags Input\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n    svelte-tags-input\n\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003eSvelte tags input is a component to use with Svelte and easily enter tags and customize some options\u003c/div\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/svelte-tags-input\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/svelte-tags-input.svg\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://madewithsvelte.com/p/svelte-tags-input/shield-link\"\u003e\u003cimg src=\"https://madewithsvelte.com/storage/repo-shields/2151-shield.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## [Live Demo](https://svelte-tags-input.vercel.app/)\n\n## Install \u0026 Usage\n\n```bash\nnpm install svelte-tags-input\n```\n\n```javascript\nimport Tags from \"svelte-tags-input\";\n\n\u003cTags /\u003e\n```\n\n## Options\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| bind:tags | `Array` | `[]` | To get the values |\n| addKeys | `Array` | \u003ckbd\u003eENTER\u003c/kbd\u003e 13 | Set which keys add new values |\n| removeKeys | `Array` | \u003ckbd\u003eBACKSPACE\u003c/kbd\u003e 8 | Set which keys remove new values |\n| allowPaste | `Boolean` | `false` | Enable pasting of a tag or tag group |\n| allowDrop | `Boolean` | `false` | Enable drag and drop of a tag or tag group |\n| splitWith | `String` | \u003ckbd\u003e,\u003c/kbd\u003e | Choose what character split you group of tags\u003cbr\u003e_Work only if allowDrop or allowPaste are true_ |\n| maxTags | `Number` | `false` | Set maximum number of tags |\n| onlyUnique | `Boolean` | `false` | Set the entered tags to be unique |\n| placeholder | `String` | `false` | Set a placeholder |\n| autoComplete | `Array` or `fn()` | `false` | Set an array of elements to create a auto-complete dropdown |\n| autoCompleteKey | `String` | `false` | Set a key to search on `autoComplete` array of objects |\n| autoCompleteStartFocused | `Boolean` | `false` | Set the autocomplete focus to the first result without user input |\n| autoCompleteFilter | `Boolean` | `true` | If `false` disable auto complete filter and return endpoint response without filter |\n| onlyAutocomplete | `Boolean` | `false` | Only accept tags inside the auto complete list |\n| name | `String` | `svelte-tags-input` | Set a `name` attribute |\n| id | `String` | Random Unique ID | Set a `id` attribute |\n| allowBlur | `Boolean` | `false` | Enable add tag when input blur |\n| disable | `Boolean` | `false` | Disable input |\n| minChars | `Number` | `1` | Minimum length of search text to show autoComplete list. If 0, autoComplete list shows all results when click on input |\n| labelText | `String` | `svelte-tags-input` | Custom text for input label |\n| labelShow | `Boolean` | `false` | If `true` the label will be visible |\n| readonly | `Boolean` | `false` | If `true` the input show in display mode |\n| onTagClick | `Function` | `empty` | A function to fire when a tag is clicked |\n| autoCompleteShowKey | `String` | `autoCompleteKey` | A key string to show a different value from auto complete list object returned |\n| onTagAdded | `Function` | `empty` | Get a function to execute when tag added |\n| onTagRemoved | `Function` | `empty` | Get a function to execute when tag removed |\n| cleanOnBlur | `Boolean` | `false` | Clear input on blur (tags keeped) |\n| customValidation | `Function` | `empty` | Create a custom validation when tag is added |\n\n##### [A complete list of key codes](https://keycode.info/)\n\n## Full example\n### [Live Demo](https://svelte-tags-input.vercel.app/)  \n\n```javascript\nimport Tags from \"svelte-tags-input\";\n\nlet tags = [];\n\nconst countryList = [\n    \"Afghanistan\",\n    \"Albania\",\n    \"Algeria\",\n    \"American Samoa\",\n    \"Andorra\",\n    \"Angola\",\n    \"Anguilla\",\n    \"Antarctica\",\n    \"Antigua and Barbuda\",\n    \"Argentina\"\n    ...\n];\n\n\u003cTags\n    bind:tags={tags}\n    addKeys={[9]} // TAB Key\n    maxTags={3}\n    allowPaste={true}\n    allowDrop={true}\n    splitWith={\"/\"}\n    onlyUnique={true}\n    removeKeys={[27]} // ESC Key\n    placeholder={\"Svelte Tags Input full example\"}\n    autoComplete={countryList}\n    name={\"custom-name\"}\n    id={\"custom-id\"}\n    allowBlur={true}\n    disable={false} // Just to illustrate. No need to declare it if it's false.\n    readonly={false} // Just to illustrate. No need to declare it if it's false.\n    minChars={3}\n    onlyAutocomplete\n    labelText=\"Label\"\n    labelShow\n    onTagClick={tag =\u003e console.log(tag)}\n    onTagAdded={(tag, tags) =\u003e console.log(tag, tags)}\n    onTagRemoved={(tag, tags) =\u003e console.log(tag, tags)}\n\tcleanOnBlur={true}\n\tcustomValidation={(tag) =\u003e tag === \"Argentina\" ? true : false }\n/\u003e\n```\n\n## Example with `autoComplete` function\n### [Live Demo](https://svelte-tags-input.vercel.app/)  \n\n```javascript\nimport Tags from \"svelte-tags-input\";\n\nlet tags = [];\n\nconst customAutocomplete = async () =\u003e {\n    const list = await fetch('https://restcountries.com/v2/all?fields=name,alpha3Code,flag');\n    const res = await list.json();\n\n    return res;\n}\n\n\u003cTags\n    bind:tags={tags}\n    autoComplete={customAutocomplete}\n    autoCompleteKey={\"name\"}\n    autoCompleteShowKey={\"alpha3Code\"}\n/\u003e\n\n{#each tags as country, index}\n    \u003cp\u003e{index} - {country.name} - {country.alpha3Code} \u003c/p\u003e\n    \u003cimg src={country.flag} /\u003e\n{/each}\n```\n\n## [FAQs](https://svelte-tags-input.vercel.app)\n\n## [CHANGELOG](CHANGELOG.md)\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## Author\n\n[Agustín](https://twitter.com/agustinlautaro)\n\n##### 2024\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagustinl%2Fsvelte-tags-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagustinl%2Fsvelte-tags-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagustinl%2Fsvelte-tags-input/lists"}