VSearchableSelect

Props

Name	Type	Description
appearance	Enum: fieldset ghost
clearable	boolean	Adds a clear button to the input field that clears the selected values.
deselect-all-text	string	Overrides the default "Deselect All" text
disabled	boolean	Sets the element's disabled state. A disabled element will not be included during form submission.
enable-select-all	boolean	Adds a "Select All" option at the top of the options list.
error-text	string	Provides a custom error message. Any current error state will be overridden.
external-tags	boolean
fixed-dropdown	boolean
helper-text	string	Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
icon	Enum: 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 ... 1266 more ...	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-trailing	boolean	Indicates the icon affix alignment.
initial-value	string	The default value of the element. This value sets the value property only when the value property has not been explicitly set.
initial-values	string[]	The initial values. This value sets the values property only when the values property has not been explicitly set.
label	string	The label for the form element.
loading	boolean	Whether the component is in a loading state.
max-lines	number
max-selected	number
multiple	boolean
name	string	The name of the element. This element's value will be surfaced during form submission under the provided name.
open	boolean
option-filter	((option: @vonage/vivid#VwcOptionElement, searchText: string) => boolean)	Function to filter the options to display.
placeholder	string
required	boolean	Require the field to be completed prior to form submission.
select-all-text	string	Overrides the default "Select All" text
selected-index	number
shape	Enum: rounded pill
success-text	string	Provides a custom success message. Any current error state will be overridden.
value	string	The current value of the element.
values	string[]	List of selected values.

Events

Name	Event Type	Description
blur	FocusEvent	Fires when the element loses focus.
change	CustomEvent<undefined>	Fired when the selected options change
click	MouseEvent	Fires 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.
focus	FocusEvent	Fires when the element receives focus.
input	CustomEvent<undefined>	Fired when the selected options change
keydown	KeyboardEvent	Fires when a key is pressed.
keyup	KeyboardEvent	Fires when a key is released.
search-text-change	CustomEvent<undefined>	Fired when the search text changes

Slots

Name	Description
contextual-help	Slot for the contextual-help component, displayed next to the label.
default	Holds the available options.
helper-text	Describes how to use the component. Alternative to the helper-text attribute.
icon	The preferred way to add an icon to the control.
loading-options	Message that appears there are no options to display and the component is in a loading state.
meta	Slot to add meta content to the control.
no-matches	Message that appears when no options match the search query.
no-options	Message that appears when no options are available.

Methods

Name	Type	Description
checkValidity	() => boolean	Return the current validity of the element.
reportValidity	() => boolean	Return the current validity of the element. If false, fires an invalid event at the element.