Option

Use to display an option list inside the Select, Searchable Select or Combobox components

Usage

<script setup lang="ts">
import { VOption } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="container">
    <VOption text="Option text" />
  </div>
</template>

<style>
.container {
  width: 250px;
}
</style>

import { registerOption } from '@vonage/vivid-api';

registerOption('your-prefix');

<script type="module">
  import { registerOption } from '@vonage/vivid-api';
  registerOption('your-prefix');
</script>

<div class="container">
  <your-prefix-option text="Option text"></your-prefix-option>
</div>

<style>
  .container {
    width: 250px;
  }
</style>

Label

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.

<script setup lang="ts">
import { ref } from 'vue';
import { VIcon, VOption, VSelect, VFlag } from '@vonage/vivid-api-vue';

const activeFlagName = ref('US');

function updateFlagIcon(e) {
  if (!activeFlagName.value) return;
  const selectedIcon = e.target.selectedOptions[0].querySelector('[slot="icon"]');
  activeFlagName.value = selectedIcon?.getAttribute('code');
}
</script>

<template>
  <VSelect label="Country code" class="country-code" @change="updateFlagIcon">
    <template #icon><VIcon :name="activeFlagName" /></template>
    <VOption label="+1" value="1" text="United States">
      <template #icon><VFlag code="US" /></template>
    </VOption>
    <VOption label="+44" value="44" text="United Kingdom">
      <template #icon><VFlag code="UK" /></template>
    </VOption>
    <VOption label="+49" value="49" text="Germany">
      <template #icon><VFlag code="DE" /></template>
    </VOption>
    <VOption label="+355" value="355" text="Albania">
      <template #icon><VFlag code="AL" /></template>
    </VOption>
  </VSelect>
</template>

<style>
.country-code {
  inline-size: 120px;
}
</style>

<vwc-select label="Country code" class="country-code" id="country-code">
  <vwc-flag slot="icon" id="active-icon" code="US"></vwc-flag>
  <vwc-option label="+1" value="1" text="United States">
    <vwc-flag slot="icon" code="US"></vwc-flag>
  </vwc-option>
  <vwc-option label="+44" value="44" text="United Kingdom">
    <vwc-flag slot="icon" code="UK"></vwc-flag>
  </vwc-option>
  <vwc-option label="+49" value="49" text="Germany">
    <vwc-flag slot="icon" code="DE"></vwc-flag>
  </vwc-option>
  <vwc-option label="+355" value="355" text="Albania">
    <vwc-flag slot="icon" code="AL"></vwc-flag>
  </vwc-option>
</vwc-select>

<script>
  const select = document.getElementById('country-code');
  const activeIcon = document.getElementById('active-icon');
  select?.addEventListener('change', (e) => {
    const selectedIcon = select.selectedOptions[0].querySelector('[slot="icon"]');
    activeIcon.name = selectedIcon?.getAttribute('name');
  });
</script>

<style>
  .country-code {
    inline-size: 120px;
  }
</style>

Slots

Icon Slot

Set the icon slot to show an icon before the option’s text. If set, the icon attribute is ignored.

<script setup lang="ts">
import { VIcon, VOption } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="container">
    <VOption text="Option" value="my-value">
      <template #icon><VIcon name="check-circle-solid" connotation="success" label="Selected" /></template>
    </VOption>
  </div>
</template>

<style>
.container {
  width: 250px;
}
</style>

<div class="container">
  <vwc-option text="Option" value="my-value">
    <vwc-icon slot="icon" name="check-circle-solid" connotation="success" label="Selected"></vwc-icon>
  </vwc-option>
</div>

<style>
  .container {
    width: 250px;
  }
</style>

Trailing Meta Slot

Use the trailing-meta slot to add an element (like a badge or an additional icon) to the end of Option.

<script setup lang="ts">
import { VBadge, VIcon, VOption } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="container">
    <VOption text="Option" value="my-value">
      <template #icon><VIcon name="check-circle-solid" connotation="success" label="Selected" /></template>
      <template #trailing-meta><VBadge appearance="subtle" connotation="cta" text="New" /></template>
    </VOption>
  </div>
</template>

<style>
.container {
  width: 250px;
}
</style>

<div class="container">
  <vwc-option text="Option" value="my-value">
    <vwc-icon slot="icon" name="check-circle-solid" connotation="success" label="Selected"></vwc-icon>
    <vwc-badge slot="trailing-meta" appearance="subtle" connotation="cta" text="New"></vwc-badge>
  </vwc-option>
</div>

<style>
  .container {
    width: 250px;
  }
</style>

Tag Icon Slot

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.

<script setup lang="ts">
import { VOption, VSearchableSelect, VFlag } from '@vonage/vivid-api-vue';
</script>

<template>
  <VSearchableSelect multiple>
    <VOption value="afghanistan" text="Afghanistan" selected>
      <template #tag-icon><VFlag code="AF" /></template>
    </VOption>
  </VSearchableSelect>
</template>

API Reference

Properties

Property	Type	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.
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	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-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.

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.

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.