VSearchableSelect

Props

Name	Type	Description
appearance	Enum: fieldset ghost	Sets the appearance of the Searchable Select element.
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 ... 1268 more ...	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons and icon-names 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[]	List of initially selected option's values. Used in case of form reset.
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.
scale	Enum: condensed normal	Sets the display size of the Searchable Select element.
select-all-text	string	Overrides the default "Select All" text.
selected-index	number
shape	Enum: rounded pill	Sets the shape of the Searchable Select element.
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 option's values in the order that they have been selected in.

Events

Name	Event Type	Description
change	CustomEvent<undefined>	Fired when the selected options change
input	CustomEvent<undefined>	Fired when the selected options change
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.