Skip to content

VSearchableSelect

Props

NameTypeDescription
appearanceEnum:
fieldset
ghost
clearablebooleanAdds a clear button to the input field that clears the selected values.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
error-textstringProvides a custom error message. Any current error state will be overridden.
external-tagsboolean
fixed-dropdownboolean
helper-textstringProvides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1229 more ...
A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-trailingbooleanIndicates the icon affix alignment.
initial-valuestringThe default value of the element. This value sets the value property only when the value property has not been explicitly set.
labelstringThe label for the form element.
loadingbooleanWhether the component is in a loading state.
max-linesnumber
max-selectednumber
multipleboolean
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
openboolean
option-filteranyFunction to filter the options to display.
placeholderstring
requiredbooleanRequire the field to be completed prior to form submission.
shapeEnum:
rounded
pill
success-textstringProvides a custom success message. Any current error state will be overridden.
valuestringThe current value of the element.
valuesstring[]List of selected option values.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
changeCustomEvent<undefined>Fired when the selected options change
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
inputCustomEvent<undefined>Fired when the selected options change
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.
search-text-changeCustomEvent<undefined>Fired when the search text changes

Slots

NameDescription
defaultHolds the available options.
helper-textDescribes how to use the component. Alternative to the helper-text attribute.
iconThe preferred way to add an icon to the control.
loading-optionsMessage that appears there are no options to display and the component is in a loading state.
metaSlot to add meta content to the control.
no-matchesMessage that appears when no options match the search query.
no-optionsMessage that appears when no options are available.

Methods

NameTypeDescription
checkValidity() => booleanReturn the current validity of the element.
reportValidity() => booleanReturn the current validity of the element. If false, fires an invalid event at the element.