https://github.com/mskocik/svelecte
Flexible autocomplete/select component written in Svelte,
https://github.com/mskocik/svelecte
autocomplete custom-element multiselect select selectize svelte tagging typeahead
Last synced: 12 days ago
JSON representation
Flexible autocomplete/select component written in Svelte,
- Host: GitHub
- URL: https://github.com/mskocik/svelecte
- Owner: mskocik
- License: mit
- Created: 2020-09-13T06:18:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-04T17:50:06.000Z (20 days ago)
- Last Synced: 2025-04-13T02:00:02.450Z (12 days ago)
- Topics: autocomplete, custom-element, multiselect, select, selectize, svelte, tagging, typeahead
- Language: JavaScript
- Homepage: https://svelecte.vercel.app
- Size: 3.41 MB
- Stars: 518
- Watchers: 5
- Forks: 46
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Svelecte [](https://www.npmjs.org/package/svelecte)
Flexible autocomplete/select component written in Svelte. Initially inspired by Selectize.js. Also usable as custom element. Usable in forms, behaves very similar to standard `` element.
See the latest changes on the [Releases](https://github.com/mskocik/svelecte/releases) page.
## 📃 Features
- searchable
- multiselect with limit of max selected items
- allow simple array or complex objects as items
- custom item renderer (formatter)
- allow creating new items (and possibly edit them)
- remote data fetch
- virtual list support
- i18n and basic ARIA support
- SSR support
- client-validation support (tested with [sveltekit-superforms](https://github.com/ciscoheat/sveltekit-superforms/))
- lazy dropdown rendering
- usable as custom element
- customizable styling
- dnd intergration with `svelte-dnd-action`
## 🔧 Installation
```
npm install svelecte
```
> [!NOTE]
> For Svelte 4 use version 4. Version 5 is svelte 5 only âš¡
## Minimalistic example
```html
import Svelecte from 'svelecte';
const list = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2'}, ...];
let myValue = null;
```
Visit [documentation](https://svelecte.vercel.app/) for more details.
## Thanks to
- [selectize.js](https://github.com/selectize/selectize.js) - main inspiration
- [sifter](https://github.com/brianreavis/sifter.js) - search engine
- [svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list) virtual list functionality for v3, v4
- and [svelte](https://svelte.dev) of course 😊
And if you want to thank me, you can through my [sponsor](https://github.com/sponsors/mskocik) page.
## License
[MIT License](https://github.com/mskocik/svelecte/blob/master/LICENSE)