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: 6 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: 2024-10-22T10:24:00.000Z (2 months ago)
• Last Synced: 2024-10-23T09:15:31.711Z (2 months ago)
• Topics: autocomplete, custom-element, multiselect, select, selectize, svelte, tagging, typeahead
• Language: Svelte
• Homepage: https://svelecte.vercel.app
• Size: 3.3 MB
• Stars: 459
• Watchers: 5
• Forks: 42
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelecte [![NPM version](http://img.shields.io/npm/v/svelecte.svg?style=flat)](https://www.npmjs.org/package/svelecte)

![svelecte](https://svelecte.vercel.app/svelecte.png)

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)