Select API

API reference docs for the Stash Select component. Learn about the props, CSS, and other APIs of this exported module.

Import

import Select from '@leaflink/stash/Select.vue';

Props

Name	Type	Default	Description
addBottomSpace	boolean	false	Passed to the addBottomSpace prop in the Field component; it adds spacing under the field that is consistent whether or not hint/error text is displayed.
allowEmpty	string | boolean | null	null
disableFiltering	boolean	false	Prevents the options from being filtered when the search term changes. Allows the parent to filter the options.
disabled	boolean	false	Disables the component, if true
displayBy	string	'name'	If `options` are an object, this is what prop to use for display.
enableTeleport	boolean	false	Enables teleporting the dropdown
error	string	''
errorText	string	''	Error text that is displayed below the field.
hideCheck	boolean	false	Hides the "check" icon if truthy
hideSearch	boolean	false	Hides the search input
hint	string	''
hintText	string	''	Hint text that is displayed below the field.
icon	string | boolean	caret-down	Sets a custom icon.
id	string	''
label	string	''	The label for the component.
lazy	TSFunctionType	undefined	Lazily evaluate and set component `options`. Will execute upon user mouseover.
loading	boolean	false	On an ajaxed request when the dropdown is open, we may be experiencing slower load times. This flag will drop a loader into the dropdown. Note: This has never been design reviewed.
menuPlacement	Placement	bottom-start	Sets the placement of the dropdown
modelValue	SelectedOptions	() => []	Sets the currently-selected value(s) for the component. Accepts an array of Objects, or a single Object (if `single` is true), or a string
name	string	undefined	Sets a name attribute on the native (hidden) select element Setting the default value to `undefined` so the attribute isn't rendered if not explicitly provided to ensure backwards compatibility with MP django forms
noTruncate	boolean	false	Prevents the Selected Option from being truncated, if true
onSearch	TSFunctionType	undefined	Equivalent to emitting a "search" event, except this prop can be used to populate the list of `options` using an HTTP request because a prop's return value can be received and awaited, unlike an event. **Tip:** to show a loading indicator while searching, return a Promise that resolves after the search is complete. **Warning:** the search input is debounced so there is no need to debounce this function.
options	Array | TSTypeOperator	() => []	The list of all options to select from.
placeholder	string	'Select option'	Placeholder text.
preserveSearchTerm	boolean	false	If true, prevents the search term from being cleared when the drawer is dismissed.
preventEmpty	boolean	false	If there is only 1 option selected, it prevents that option from being de-selected
searchBy	Array	() => []	List of one or more fields to search on. When empty, displayBy will be used
searchLoading	boolean	false
searchPlaceholder	string	'Search'
searchable	string | boolean | null	null
selectItemType	string	''	In the selection text we use this to give more visual distinction to what type of item(s) are selected E.g. 2 customers selected. An empty string will result in `2 selected`.
showOptionalInLabel	boolean	false	Render "(optional)" to the right of the label text
single	boolean	false	Functions as a single select, if true
teleportTo	string | HTMLElement	`#${DEFAULT_MENUS_PLUGIN_NODE_ID}`	The selector or element to which the dropdown should be teleported
trackBy	string	'id'	Default field to track selected options by.
useFuzzySearch	boolean	false	Uses the "fuzzy search" algorithm when searching, if true
value	SelectedOptions | null	null

Slots

Name	Description
selected	Selected value(s) custom text. Exposes the option object.
option	Select custom option text. Exposes the option object.
no-options	No options text.
hint

Events

Name	Description
update:model-value	Emitted when the model value changes.
clear	Emitted the selected value(s) a cleared.
add	Emitted when an option is added.
remove	Emitted when an option is removed.
opened	Emitted when the select is opened.
closed	Emitted when the select is closed.