VSelect
Props
| Name | Type | Description |
|---|---|---|
| success-text | string | The success text for the form element. |
| error-text | string | The error text for the form element. |
| helper-text | string | The helper text for the form element. |
| label | string | The label for the form element. |
| icon | Enum:10-sec-backward-line10-sec-backward-solid10-sec-forward-line10-sec-forward-solid30-sec-backward-line30-sec-backward-solid30-sec-forward-line30-sec-forward-solid5-sec-backward-line5-sec-backward-solid5-sec-forward-line5-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/ |
| icon-trailing | boolean | Indicates the icon affix alignment. |
| aria-current | Enum:pagesteplocationdatetimetruefalse | Indicates the element that represents the current item within a container or set of related elements. |
| disabled | boolean | Sets the element's disabled state. A disabled element will not be included during form submission. |
| 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. |
| open | boolean | The open attribute. |
| position | Enum:abovebelow | Reflects the placement for the listbox when the select is open. |
| multiple | boolean | Indicates if the listbox is in multi-selection mode. |
| scale | Enum:condensednormal | The size the select should have. |
| appearance | Enum:fieldsetghost | The appearance attribute. |
| shape | Enum:roundedpill | The shape attribute. |
| fixed-dropdown | boolean | The fixed-dropdown attribute. |
| placeholder | string | The placeholder attribute. |
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 | CustomEvent<undefined> | Fires a custom 'input' event when the value updates |
| change | CustomEvent<HTMLElement> | Fires a custom 'change' event when the value updates |
Slots
| Name | Description |
|---|---|
| default | Default slot. |
| icon | Slot to add an icon to the select control. |
| meta | Slot to add meta content to the select control. |
| helper-text | Describes how to use the select. Alternative to the helper-text attribute. |
Methods
| Name | Type | Description |
|---|---|---|
| setPositioning | () => void | Calculate and apply listbox positioning based on available viewport space. |
| multipleChanged | `(prev: boolean | undefined,next: boolean) => unknown` |
| setSelectedOptions | () => unknown | Sets an option as selected and gives it focus. |
| selectFirstOption | () => void | Moves focus to the first selectable option. |
| labelChanged | () => unknown | |
| setDefaultSelectedOption | () => void | |
| slottedOptionsChanged | `(prev: Element[] | undefined,next: Element[]) => unknown` |
| formResetCallback | () => unknown |