Skip to content

VSelect

Props

NameTypeDescription
appearanceEnum:
fieldset
ghost
The appearance attribute.
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.
fixed-dropdownbooleanThe fixed-dropdown attribute.
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.
multiplebooleanIndicates if the listbox is in multi-selection mode.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
openbooleanThe open attribute.
placeholderstringThe placeholder attribute.
requiredbooleanRequire the field to be completed prior to form submission.
scaleEnum:
condensed
normal
The size the select should have.
shapeEnum:
rounded
pill
The shape attribute.
success-textstringProvides a custom success message. Any current error state will be overridden.
valuestringThe current value of the element.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
changeCustomEvent<HTMLElement>Fires a custom 'change' event when the value updates
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>Fires a custom 'input' event when the value updates
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
defaultDefault slot.
helper-textDescribes how to use the select. Alternative to the helper-text attribute.
iconThe preferred way to add an icon to the select control.
metaSlot to add meta content to the select control.

Methods

NameTypeDescription
checkValidity() => booleanReturn the current validity of the element.
formResetCallback() => unknown
reportValidity() => booleanReturn the current validity of the element. If false, fires an invalid event at the element.
selectFirstOption() => voidMoves focus to the first selectable option.
setDefaultSelectedOption() => void
setSelectedOptions() => unknownSets an option as selected and gives it focus.
slottedOptionsChanged`(prev: Element[]undefined,next: Element[]) => unknown`