Option

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

Text

The text attribute set the text to be displayed in the option list item and in the parent element when selected.

The label attribute can be used to display different text in the parent element when selected.

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

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

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

Secondary Text

The Option can be given extra context using the text-secondary attribute.

To improve readability, avoid long text and multiple lines where possible.

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

<template>
  <div class="container">
    <VOption text="Option text" text-secondary="Secondary text" value="option1" />
  </div>
</template>

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

Selected

The selected attribute indicates that the option is selected.

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

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

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

Icons

Icons can be provided using the icon slot. It is displayed at the start of the option, before the text.

The icon(deprecated) attribute displays an icon from the icon library

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

<template>
  <div class="container">
    <VOption text="Option text" value="option1">
      <template #icon><VIcon name="chat-line" /></template>
    </VOption>
  </div>
</template>

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

Connotation

The connotation attribute controls the selected color.

For visual consistency, avoid mixing different connotations within the same control.
All options within a single listbox or select should share the same connotation.

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

<template>
  <div class="container">
    <VOption text="Accent (default)" value="accent1" />
    <VOption selected text="Accent (default)" value="accent2" />
    <VOption connotation="cta" text="CTA" value="cta1" />
    <VOption selected connotation="cta" text="CTA" value="cta2" />
  </div>
</template>

<style>
.container {
  width: 250px;
  gap: 4px;
  display: flex;
  flex-direction: column;
}
</style>

<div class="container">
  <vwc-option text="Accent (default)" value="accent1"></vwc-option>
  <vwc-option selected text="Accent (default)" value="accent2"></vwc-option>
  <vwc-option connotation="cta" text="CTA" value="cta1"></vwc-option>
  <vwc-option selected connotation="cta" text="CTA" value="cta2"></vwc-option>
</div>

<style>
  .container {
    gap: 4px;
    width: 250px;
    display: flex;
    flex-direction: column;
  }
</style>

Disabled

The disabled attribute indicates that the option is disabled and can not be selected.

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

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

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

Matched Text

The matched-text attribute highlights a part of text as matching a search query.

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

<template>
  <div class="container">
    <VOption matched-text="text" text="Option text" value="option1" />
  </div>
</template>

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