Properties

Scroll down for event callback props.

PropertyTypeDefaultDescription
namestring'svelecte'Create internal <select> element. Without name defined, no <select> is created
inputIdstringnullAllow targeting input using a html ID. Otherwise it is based on name property
requiredboolfalseMake sense only when name is defined and you work with it as standard <select> element
disabledboolfalseDisable component
optionsarray[]Option list, see Options for more info
optionResolverfunctionundefinedCustom option resolver. Enabling “query mode”. Check the example on Options page
valuestring,objectnullBound value property. For multiple is always array
valueAsObjectboolfalseSwitch whether Svelecte should expects from and return to bind:value objects or primitive value (usually string, number)
parentValuestringundefinedValue which this component depends on. When parentValue is null, component is disabled. There is an example on Remote Datasource page.
valueFieldstringnullProperty to be used as value (if not specified, will be resolved automatically)
labelFieldstringnullProperty shown in dropdown (if not specified, will be resolved automatically)
groupLabelFieldstringlabelProperty to be used as optgroup label
groupItemsFieldstringoptionsProperty holding optgroup option list
disabledFieldstring$disabledProperty to check, whether given options should be disabled and unselectable
placeholderstringSelectInput placeholder
searchablebooltrueAllow search among items by typing
clearableboolfalseDisplay ✖ icon to clear whole selection
renderermixednullDropdown and selection renderer function. More on Rendering page
disableHighlightboolfalseDisable highlighting of input value in results. Can be useful with a renderer function that includes additional text or does its own highlighting
highlightFirstItembooltrueAutomatically highlight the first item in the list when the dropdown opens
selectOnTabbool,stringnullBased on value provided, it allows selecting currently active item by Tab AND (if value is 'select-navigate') also focus next input.
resetOnBlurbooltrueControl if input value should be cleared on blur
resetOnSelectbooltrueControl if input value should be cleared on item selection. Note: applicable only with multiple
closeAfterSelectbool'auto'closes dropdown after selection. Setting this to true is useful for multiple select only. For single select dropdown is always closed no matter the value this property has
strictModebooltrueWhen true, passed value is checked whether exists on provided options array. If not, invalidValue event is dispatched. This is useful with fetch defined and you want to specify default value
multipleboolfalseallow multiselection. Will be set automatically to true, if name property ends with [], like tags[]
maxnumber0Maximum allowed items selected, applicable only for multiselect
collapseSelectionstringnullWhether selection should be collapsed and when, check Rendering for more info.
keepSelectionInListbool'auto'Whether keep selected items in dropdown. auto for multiple removes selected items from dropdown
creatableboolfalseAllow creating new item(s)
creatablePrefixstring*Prefix marking new item
allowEditingboolfalseWhen pressing Backspace switch to edit mode instead of removing newly created item. NOTE intended to be used with creatable property
keepCreatedbooltrueSwitch whether to add newly created option to option list or not
delimiterstring,split inserted text when pasting to create multiple items
createFilterfunctionnullFunction receiving inputValue returning bool checks if input string is valid or not. If you want to dismiss entered value (ie. prevent item creation), function should return true, false otherwise.
createHandlerfunctionnullCustom (may be) async function transforming input string to option object. Default returns object with valueField and labelField properties, where labelField’s value is input string prefixed with creatablePrefix property.
fetchstringnullSets fetch URL. Visit [Remote datasource] form more details
fetchPropsobjectnullSet options for new fetch Request
fetchCallbackfunctionnulloptional fetch callback
fetchResetOnBlurbooltruereset previous search results on empty input, related to resetOnBlur
fetchDebounceTimenumber300how many miliseconds is request debounced before fetch is executed
minQuerynumber1Minimal amount of characters required to perform remote request. Usable with fetch property
lazyDropdownbooltruerender dropdown after first focus, not by default
positionResolverfunctionnoop(optional) action for custom dropdown positioning.
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)
searchPropsobjectnullCustomize sifter.js settings. See Searching page for more details
classstringsvelecte-controldefault css class
i18nobjectnullI18n object overriding default settings
dndzonefunctionnoopPass dndzone from svelte-dnd-action, if you want to support selection reordering. See the example REPL
anchor_elementboolnullinternal: when passing also existing select (for custom element)

Event callback props

Propertyargumentsdescription
onChangeselectionselected objects. If anchor property is defined, change event is called also on it
onFocus<input>focus event
onBlur<input>blur event
onCreateOptionoptionnewly created option object
onCreateFailobjectthrown if createHandler fails
onEnterKeyunderlying keyDown eventtriggered when natively it would cause form submit (dropdown is closed). This gives you ability to prevent it by calling event.detail.preventDefault()
onFetchoptionsnewly fetched remote options
onFetchErrorerrordispatche on fetch error of any kind
onInvalidValueinvalidValuetriggered when passed value is out of provided options items. Internal (and bound, if any) value is set to null or [] if multiple

Made with Svelte ❤ by Martin Skocik.

You can support me through GitHub.