Vivid Vue
On this page

VSearchableSelect ​

Props ​

NameTypeDescription
success-textstringThe success text for the form element.
error-textstringThe error text for the form element.
helper-textstringThe helper text for the form element.
labelstringThe label for the form element.
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
... 1208 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.
aria-currentEnum:
page
step
location
date
time
true
false		Indicates the element that represents the current item within a container or set of related elements.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
initial-valuestringThe initial value of the form. This value sets the value property only when the value property has not been explicitly set.
valuestringThe current value of the element. This property serves as a mechanism to set the value property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
requiredbooleanRequire the field to be completed prior to form submission.
appearanceEnum:
fieldset
ghost
shapeEnum:
rounded
pill
fixed-dropdownboolean
placeholderstring
openboolean
multipleboolean
external-tagsboolean
max-linesnumber
clearableboolean

Events ​

NameEvent TypeDescription
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.
blurFocusEventFires when the element loses focus.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.
inputEventFires when the value of an element has been changed.
changeCustomEvent<undefined>Fired when the selected options change x-vueModel modelValue value input (event.target as HTMLInputElement).value x-vueModel values values input (event.target as HTMLInputElement).values

Slots ​

NameDescription
defaultHolds the available options.
iconSlot to add an icon to the select control.
metaSlot to add meta content to the select control.
helper-textDescribes how to use the select. Alternative to the helper-text attribute.
no-optionsMessage that appears when no options are available.
no-matchesMessage that appears when no options match the search query.

Methods ​

NameTypeDescription
_searchTextChanged() => unknown
onInputInput(event: InputEvent) => unknown
onInputFocus(_: FocusEvent) => unknown
onInputBlur(_: FocusEvent) => unknown
isValidValue(value: string) => unknown
valuesChanged() => unknown
tagLabelForValue(value: string) => unknown
measureTag(text: string,removable: boolean) => unknown
updateTagLayout() => unknown
updateHiddenOptions() => unknown
updateSelectedStateOnOptions() => unknown
clickHandler`(e: MouseEvent) => booleanvoid`
handleClickOnTheWholeComponent(e: MouseEvent) => unknown
onTagRemoved(value: string) => unknown
keydownHandler(e: KeyboardEvent) => unknown
selectHighlightedOption() => unknown
selectFirstOption() => unknown
selectLastOption() => unknown
selectPageUpOption() => unknown
selectPageDownOption() => unknown
selectPreviousOption() => unknown
selectNextOption() => unknown
takeValuesFromSlottedNodes() => unknown
onClearButtonClick() => unknown
tagKeydownHandler(event: KeyboardEvent) => unknown