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

v5.0

• [breaking] Dropped dispatching custom events through createEventDispatcher. Callback methods are expected instead. Previous event names has now added prefix on and are properly capitalized. This is a list of event to callback mapping:
  • change changed to onChange
  • focus changed to onFocus
  • blur changed to onBlur
  • createoption changed to onCreateOption
  • createFail changed to onCreateFail
  • enterKey changed to onEnterKey
  • fetch changed to onFetch
  • fetchError changed to onFetchError
  • invalidValue changed to onInvalidValue
• [breaking] Dropped support for svelte-use-form validation library (remove triggering input event on <select> element)
• [breaking] Replaced slots with snippets
• add i18n.aria_removeItemLabel function to avoid svelte compiler warning
• add emitValues property to emit values instead of objects
• [breaking] do not automatically set multiple property if name included "[]" meaning multiple items when submitting form. It's inversed now, if name doesn't contain [] suffix it is added automatically
• [breaking] remove svelte-tiny-virtual-list dependency, provide own implementation
• [breaking] remove vlHeight property, related to removal of virtual list dependency, use --max-height css property instead
• add html renderer since default one escapes following HTML entities: <, >, &, ' and "
• add properties for additional CSS styling:
  • controlClass for .sv-control
  • dropdownClass for .sv_dropdown
  • optionClass for .sv-item--wrap.in-dropdown elements

v4.0:

• [breaking] changed signature of registerSvelecte

• [breaking] registerSvelecte is now available from svelecte itself, not from svelecte/component

• fix default placeholder to use global settings