On this page

VCombobox

Props

Name	Type	Description
label	`string`	The label for the form element.
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` ... 1217 more ...	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
aria-current	Enum: `page` `step` `location` `date` `time` `true` `false`	Indicates the element that represents the current item within a container or set of related elements.
initial-value	`string`	The initial value of the form. This value sets the `value` property only when the `value` property has not been explicitly set.
value	`string`	The 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.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
required	`boolean`	Require the field to be completed prior to form submission.
autocomplete	Enum: `inline` `list` `both` `none`	The autocomplete attribute.
open	`boolean`	The open attribute.
placeholder	`string`	Sets the placeholder value of the element, generally used to provide a hint to the user.
position	Enum: `above` `below`	The placement for the listbox when the combobox is open.
disabled	`boolean`	The disabled state of the listbox.
appearance	Enum: `fieldset` `ghost`	The appearance attribute.
placement	Enum: `top` `bottom`	the placement of the combobox HTML Attribute: string
fixed-dropdown	`boolean`	Whether the dropdown is using a fixed positioning strategy.

Events

Name	Event Type	Description
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.
blur	`FocusEvent`	Fires when the element loses focus.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.
input	`Event`	Fires when the value of an element has been changed.
change	`CustomEvent<undefined>`	Fires a custom 'change' event when the value updates

Slots

Name	Description
default	Default slot.

Methods

Name	Type	Description
validate	`() => void`	{@inheritDoc (FormAssociated:interface).validate}
filterOptions	`() => void`	Filter available options by text value.
setPositioning	`(force: unknown) => void`	Calculate and apply listbox positioning based on available viewport space.
selectFirstOption	`() => void`	Moves focus to the first selectable option.
setSelectedOptions	`() => unknown`	Sets an option as selected and gives it focus.