VOption

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

Props

Name	Type	Description
checked	Enum: false true	The 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.
connotation	Enum: accent cta	Sets the connotation that appears when selected
default-selected	boolean	Sets the option's initial selected state (mirrors the native selected attribute)
disabled	boolean	The disabled state of the option.
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 ... 1266 more ...	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons and icon-names See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-trailing	boolean	Indicates the icon affix alignment.
label	string
matched-text	string	Text to highlighted as matching a search query
selected	boolean	Indicates whether the option is currently selected
selected-attribute	boolean
tag-connotation	Enum: accent cta	When displayed as a tag, the connotation of the tag
text	string
text-secondary	string	Secondary text displayed below or next to the primary text
value	string	The value of the option.

Events

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

Slots

Name	Description
icon	The preferred way to add an icon to the component.
tag-icon	Icon to be displayed in the tag when selected inside of Searchable Select.
trailing-meta	For additional elements at the end of the Option.