Skip to content

VCombobox

Props

NameTypeDescription
appearanceEnum:
fieldset
ghost
The appearance attribute.
autocompleteEnum:
inline
list
both
none
The autocomplete 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-dropdownbooleanWhether the dropdown is using a fixed positioning strategy.
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/
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.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
openbooleanThe open attribute.
placeholderstringSets the placeholder value of the element, generally used to provide a hint to the user.
placementEnum:
top
bottom
the placement of the combobox HTML Attribute: string
requiredbooleanRequire the field to be completed prior to form submission.
scaleEnum:
condensed
normal
The size the combobox 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<undefined>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.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

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

Methods

NameTypeDescription
checkValidity() => booleanReturn the current validity of the element.
filterOptions() => voidFilter available options by text value.
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.
setSelectedOptions() => unknownSets an option as selected and gives it focus.
validate() => void{@inheritDoc (FormAssociated:interface).validate}