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 <select> element.

See the latest changes on the 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)
• 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

<script>
import Svelecte from 'svelecte';

const list = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2'}, ...];
let myValue = null;
</script>

<Svelecte options={list} bind:value={myValue}></Svelecte>

Visit documentation for more details.

Thanks to

• selectize.js - main inspiration
• sifter - search engine
• svelte-tiny-virtual-list virtual list functionality for v3, v4
• and svelte of course 😊

And if you want to thank me, you can through my sponsor page.

License

MIT License