Skip to content

VOption

An Option Custom HTML Element. Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .

Props

NameTypeDescription
checkedbooleanThe checked state is used when the parent listbox is in multiple selection mode. To avoid accessibility conflicts, the checked state should not be present in single selection mode.
default-selectedbooleanThe defaultSelected state of the option.
disabledbooleanThe disabled state of the option.
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
... 1231 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.
labelstring
matched-textstringText to highlighted as matching a search query.
selectedbooleanThe checked state of the control.
tag-connotationEnum:
accent
cta
When displayed as a tag, the connotation of the tag.
textstring
valuestringThe value of the option.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
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
iconThe preferred way to add an icon to the component.