sve

svelecte

Selectize-like component written in Svelte, also usable as custom-element 💪⚡

Showing:

Popularity

Downloads/wk

139

GitHub Stars

14

Maintenance

Last Commit

14d ago

Contributors

1

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

Svelecte

svelecte

Flexible autocomplete/select component written in Svelte. Massively inspired by Selectize.js. Also usable as custom element (CE). Usable in forms, behaves very similar to standard <select> element.

📃 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
  • remote data fetch
  • virtual list support
  • usable as custom element
  • i18n support
  • SSR support
  • lazy dropdown rendering

🔧 Installation

npm install svelecte --save

👀 Examples

👉 Examples with detailed documentation can be found at https://mskocik.github.io/svelecte-docs/.

🛠 Configuration & API

Exposed properties:

PropertyTypeDefaultDescription
optionsarray[]Data array
valueFieldstringnullProperty to be used as value (if not specified, will be selected automatically)
labelFieldstringnullProperty shown in dropdown (if not specified, will be selected automatically)
requiredboolfalsemake sense only when name is defined
placeholderstring'Select'Input placeholder
searchablebooltrueAllow search among items by typing
disabledboolfalseDisable component
rendererstring|functionnulldropdown and selection renderer function. More info in item rendering section
selectOnTabboolfalseAllow selecting currently active item by Tab key
resetOnBlurbooltrueControl if input value should be cleared on blur
clearableboolfalseDisplay ✖ icon to clear whole selection
multipleboolfalseallow multiselection. Will be set automatically to true, if name property ends with [], like tags[]
maxnumber0Maximum allowed items selected, applicable only for multiselect
collapseSelectionboolfalsecollapse selection when multiple and not focused
namestringnullcreate <select>, usable for normal forms.
creatableboolfalseAllow creating new item(s)
creatablePrefixstring'*'Prefix marking new item
delimiterstring','split inserted text when pasting to create multiple items
fetchstring|functionnullCheck "remote datasource" section for more details
fetchModestring'auto'When set to init options are fetched only when mounted, when searching it search in downloaded dataset
fetchCallbackfunctionnulloptional fetch callback
fetchResetOnBlurbooltruereset previous search results on empty input, related to resetOnBlur
lazyDropdownbooltruerender dropdown after first focus, not by default
virtualListboolfalseWhether use virtual list for dropdown items (useful for large datasets)
vlHeightnumbernullHeight of virtual list dropdown (if not specified, computed automatically)
vlItemSizenumbernullHeight of one row (if not specified, computed automatically)
searchFieldstring|arraynullSpecify item property that will be used to search by (if not specified all props except value prop will be used)
sortFieldstringnullSpecify sort property. If not specified, labelField will be used
disableSifterboolfalseDisable Sifter filtering & sorting. Can be useful in combination with fetch, when further filtering or sorting may be undesired
disableHighlightboolfalseDisable highlighting of input value in results. Can be useful with a renderer function that includes additional text or does its own highlighting
classstring'svelecte-control'default css class
stylestringnullinline style
hasAnchorboolnullinternal: when passing also existing select (for CE)

Emitted events:

Eventargumentsdescription
fetchoptionsnewly fetched remote options
changeselectionselected objects * if anchor is defined, change event is called also on it

Public API:

Nametypeargumentsdescription
selectionproperty-setter/getter - selected value(s) as objects, for binding. For usage in Svelte
focusfunction-focus input
getSelectionfunctionboolreturn selection, if true is passed, only values are returns, whole objects otherwise
setSelectionfunctionarrayset selection programmatically
configproperty-context property: global common config for all instances, you can override most properties here and also some additional, mainly i18n
addFormatterfunction-context function: with signature (name, formatFn) you can add additional item renderers (formatters)
<!-- clearByParentboolinternal for CE -->

🙏 Thanks to

License

MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100