Option
Use to display an option list inside the Select, Searchable Select or Combobox components
import { registerOption } from '@vonage/vivid';
registerOption('your-prefix');
The label attribute can be used to display different text in the parent element when selected.
In the example below, the international dialing code (label) is displayed when selected, but the country name (text) is used in the option list.
Set the icon slot to show an icon before the option's text.
If set, the icon attribute is ignored.
Use the trailing-meta slot to add an element (like a badge or an additional icon) to the end of Option.
If the option is represented as a tag in a Searchable Select component, you can use tag-icon slot to show an icon in the tag.
| Property | Type | Default | Description |
|---|---|---|---|
| checked | 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 | 'accent' | 'cta' |
Sets the connotation that appears when selected | |
| defaultSelected | boolean |
Sets the option's initial selected state (mirrors the native `selected` attribute) | |
| disabled | boolean |
The disabled state of the option. | |
| icon | IconId |
A decorative icon the custom element should have. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons and `icon-name`s See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ | |
| iconTrailing | boolean |
Indicates the icon affix alignment. | |
| label | string |
||
| matchedText | string |
Text to highlighted as matching a search query | |
| selected | boolean |
Indicates whether the option is currently selected | |
| selectedAttribute | boolean |
||
| tagConnotation | 'accent' | 'cta' |
When displayed as a tag, the connotation of the tag | |
| text | string |
||
| textSecondary | string |
Secondary text displayed below or next to the primary text | |
| value | string |
The value of the option. |
| Property | Type | Default | Description |
|---|---|---|---|
| checked | 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 | 'accent' | 'cta' |
Sets the connotation that appears when selected | |
| selected | boolean |
Sets the option's initial selected state (mirrors the native `selected` attribute) | |
| disabled | boolean |
The disabled state of the option. | |
| icon | IconId |
A decorative icon the custom element should have. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons and `icon-name`s 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 | |
| current-selected | boolean |
Indicates whether the option is currently selected | |
|
selectedAttribute
(property only) |
boolean |
||
| tag-connotation | '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. |
| 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. |
| 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. |