Searchable Select

Searchable Select allows users to select one or multiple items from a list of options. It provides a search input field to filter the options.

Labelling

Label Text

The label attribute provides a short description of the purpose of the Searchable Select.

If a visible label can’t be used, provide one using the

aria-label

attribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.

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

<template>
  <VSearchableSelect label="Country">
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
</template>

<vwc-searchable-select label="Country">
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>

Helper Text

The helper-text attribute provides additional information about the purpose of the Searchable Select.

To add HTML to the helper text, use the helper-text slot.

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

<template>
  <VSearchableSelect helper-text="Select the countries that your company operates in" label="Country" multiple>
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
</template>

<vwc-searchable-select helper-text="Select the countries that your company operates in" label="Country" multiple>
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>

Placeholder Text

The placeholder attribute provides some text to be displayed when no option has been selected.

Avoid using placeholder text as a substitute for a label. Placeholder text is not a reliable label—it disappears when users type and is not always announced by screen readers. Use a label element to ensure the Combobox is both visually and programmatically associated with a descriptive label.

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

<template>
  <VSearchableSelect label="Country" placeholder="Select a country...">
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
  <VSearchableSelect label="Countries" placeholder="Select countries..." multiple>
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
</template>

<vwc-searchable-select label="Country" placeholder="Select a country...">
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>
<vwc-searchable-select label="Countries" placeholder="Select countries..." multiple>
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>

Contextual Help

You can add the Contextual Help component using the contextual-help slot. It will be displayed next to the label, providing users additional information.

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

<template>
  <VSearchableSelect label="Country">
    <template #contextual-help>
      <VContextualHelp>Select the country where your company operates</VContextualHelp>
    </template>
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
</template>

<vwc-searchable-select label="Country">
  <vwc-contextual-help slot="contextual-help">Select the country where your company operates</vwc-contextual-help>
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>

Validation Feedback

Error Text

The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.

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

<template>
  <VSearchableSelect error-text="Madrid is incorrect" label="What is the capital of Italy?">
    <VOption value="madrid" text="Madrid" selected />
    <VOption value="paris" text="Paris" />
    <VOption value="london" text="London" />
    <VOption value="rome" text="Rome" />
  </VSearchableSelect>
</template>

<vwc-searchable-select error-text="Madrid is incorrect" label="What is the capital of Italy?">
  <vwc-option value="madrid" text="Madrid" selected></vwc-option>
  <vwc-option value="paris" text="Paris"></vwc-option>
  <vwc-option value="london" text="London"></vwc-option>
  <vwc-option value="rome" text="Rome"></vwc-option>
</vwc-searchable-select>

Success Text

The success-text attribute provides a custom success message. Any current error state will be overridden by success-text.

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

<template>
  <VSearchableSelect success-text="Rome is correct" label="What is the capital of Italy?">
    <VOption value="madrid" text="Madrid" />
    <VOption value="paris" text="Paris" />
    <VOption value="london" text="London" />
    <VOption value="rome" text="Rome" selected />
  </VSearchableSelect>
</template>

<vwc-searchable-select success-text="Rome is correct" label="What is the capital of Italy?">
  <vwc-option value="madrid" text="Madrid"></vwc-option>
  <vwc-option value="paris" text="Paris"></vwc-option>
  <vwc-option value="london" text="London"></vwc-option>
  <vwc-option value="rome" text="Rome" selected></vwc-option>
</vwc-searchable-select>

Icon

Use the icon slot to add an icon from the icon library to the component.

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

<template>
  <VSearchableSelect label="Country"
    ><template #icon><VIcon name="globe-line" /></template>
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
</template>

<vwc-searchable-select label="Country">
  <vwc-icon slot="icon" name="globe-line"></vwc-icon>
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>

Shape

The shape attribute controls the border radius of the Searchable Select input element.

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

<template>
  <VSearchableSelect shape="rounded" label="Country">
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
  <VSearchableSelect shape="pill" label="Country">
    <VOption value="AF" text="Afghanistan" />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
</template>

<vwc-searchable-select shape="rounded" label="Country">
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>
<vwc-searchable-select shape="pill" label="Country">
  <vwc-option value="AF" text="Afghanistan"></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>

Appearance

The appearance attribute controls the style of the select element.

Use ghost in combination with a containing element which provides a border, for example when used inside the leading action items slot of Text Field.

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

<template>
  <VSearchableSelect appearance="ghost" label="Country" clearable>
    <VOption value="AF" text="Afghanistan" selected />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
  <VSearchableSelect appearance="ghost" label="Country" clearable multiple>
    <VOption value="AF" text="Afghanistan" selected />
    <VOption value="AL" text="Albania" />
    <VOption value="DZ" text="Algeria" />
  </VSearchableSelect>
</template>

<vwc-searchable-select appearance="ghost" label="Country" clearable>
  <vwc-option value="AF" text="Afghanistan" selected></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>
<vwc-searchable-select appearance="ghost" label="Country" clearable multiple>
  <vwc-option value="AF" text="Afghanistan" selected></vwc-option>
  <vwc-option value="AL" text="Albania"></vwc-option>
  <vwc-option value="DZ" text="Algeria"></vwc-option>
</vwc-searchable-select>

Scale

The scale attribute controls the display size of the Searchable Select.

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

<template>
  <div class="container">
    <VSearchableSelect scale="normal" label="Normal" placeholder="Select an option">
      <VOption value="1" text="Option 1" />
      <VOption value="2" text="Option 2" />
      <VOption value="3" text="Option 3" />
    </VSearchableSelect>
    <VSearchableSelect scale="condensed" label="Condensed" placeholder="Select an option">
      <VOption value="1" text="Option 1" />
      <VOption value="2" text="Option 2" />
      <VOption value="3" text="Option 3" />
    </VSearchableSelect>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  gap: 16px;
}
</style>

<div class="container">
  <vwc-searchable-select scale="normal" label="Normal" placeholder="Select an option">
    <vwc-option value="1" text="Option 1"></vwc-option>
    <vwc-option value="2" text="Option 2"></vwc-option>
    <vwc-option value="3" text="Option 3"></vwc-option>
  </vwc-searchable-select>
  <vwc-searchable-select scale="condensed" label="Condensed" placeholder="Select an option">
    <vwc-option value="1" text="Option 1"></vwc-option>
    <vwc-option value="2" text="Option 2"></vwc-option>
    <vwc-option value="3" text="Option 3"></vwc-option>
  </vwc-searchable-select>
</div>

<style>
  .container {
    display: flex;
    gap: 16px;
  }
</style>

Multiple

The multiple attribute allows the user to select more than one option.

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

<template>
  <VSearchableSelect multiple label="Countries">
    <VOption value="AF" text="Afghanistan">
      <template #icon>
        <VFlag code="AF" />
      </template>
    </VOption>
    <VOption value="AL" text="Albania">
      <template #icon>
        <VFlag code="AL" />
      </template>
    </VOption>
    <VOption value="DZ" text="Algeria">
      <template #icon>
        <VFlag code="DZ" />
      </template>
    </VOption>
  </VSearchableSelect>
</template>

<vwc-searchable-select multiple label="Countries">
  <vwc-option value="AF" text="Afghanistan">
    <vwc-flag slot="icon" code="AF"></vwc-flag>
  </vwc-option>
  <vwc-option value="AL" text="Albania">
    <vwc-flag slot="icon" code="AL"></vwc-flag>
  </vwc-option>
  <vwc-option value="DZ" text="Algeria">
    <vwc-flag slot="icon" code="DZ"></vwc-flag>
  </vwc-option>
</vwc-searchable-select>

Max Lines

This controls the maximum number of lines of tags to display. When the limit would be exceeded, the remaining tags will be hidden and replaced by a counter instead.

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

<template>
  <VSearchableSelect multiple label="Countries" :max-lines="2">
    <VOption value="afghanistan" text="Afghanistan" selected>
      <template #icon><VFlag code="AF" /></template>
    </VOption>
    <VOption value="albania" text="Albania" selected>
      <template #icon><VFlag code="AL" /></template>
    </VOption>
    <VOption value="algeria" text="Algeria" selected>
      <template #icon><VFlag code="DZ" /></template>
    </VOption>
    <VOption value="argentina" text="Argentina" selected>
      <template #icon><VFlag code="AR" /></template>
    </VOption>
    <VOption value="armenia" text="Armenia" selected>
      <template #icon><VFlag code="AM" /></template>
    </VOption>
    <VOption value="aruba" text="Aruba" selected>
      <template #icon><VFlag code="AW" /></template>
    </VOption>
    <VOption value="australia" text="Australia" selected>
      <template #icon><VFlag code="AU" /></template>
    </VOption>
  </VSearchableSelect>
</template>

<vwc-searchable-select multiple label="Countries" max-lines="2">
  <vwc-option value="afghanistan" text="Afghanistan" selected>
    <vwc-flag slot="icon" code="AF"></vwc-flag>
  </vwc-option>
  <vwc-option value="albania" text="Albania" selected>
    <vwc-flag slot="icon" code="AL"></vwc-flag>
  </vwc-option>
  <vwc-option value="algeria" text="Algeria" selected>
    <vwc-flag slot="icon" code="DZ"></vwc-flag>
  </vwc-option>
  <vwc-option value="argentina" text="Argentina" selected>
    <vwc-flag slot="icon" code="AR"></vwc-flag>
  </vwc-option>
  <vwc-option value="armenia" text="Armenia" selected>
    <vwc-flag slot="icon" code="AM"></vwc-flag>
  </vwc-option>
  <vwc-option value="aruba" text="Aruba" selected>
    <vwc-flag slot="icon" code="AW"></vwc-flag>
  </vwc-option>
  <vwc-option value="australia" text="Australia" selected>
    <vwc-flag slot="icon" code="AU"></vwc-flag>
  </vwc-option>
</vwc-searchable-select>

Max Selected

This controls the maximum number of items that user can select. Once the limit is reached, the remaining options will be disabled.

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

<template>
  <VSearchableSelect multiple label="Countries" :max-selected="3">
    <VOption value="afghanistan" text="Afghanistan">
      <template #icon><VFlag code="AF" /></template>
    </VOption>
    <VOption value="albania" text="Albania">
      <template #icon><VFlag code="AL" /></template>
    </VOption>
    <VOption value="algeria" text="Algeria">
      <template #icon><VFlag code="DZ" /></template>
    </VOption>
    <VOption value="argentina" text="Argentina">
      <template #icon><VFlag code="AR" /></template>
    </VOption>
    <VOption value="armenia" text="Armenia">
      <template #icon><VFlag code="AM" /></template>
    </VOption>
    <VOption value="aruba" text="Aruba">
      <template #icon><VFlag code="AW" /></template>
    </VOption>
    <VOption value="australia" text="Australia">
      <template #icon><VFlag code="AU" /></template>
    </VOption>
  </VSearchableSelect>
</template>

<vwc-searchable-select multiple label="Countries" max-selected="3">
  <vwc-option value="afghanistan" text="Afghanistan">
    <vwc-flag slot="icon" code="AF"></vwc-flag>
  </vwc-option>
  <vwc-option value="albania" text="Albania">
    <vwc-flag slot="icon" code="AL"></vwc-flag>
  </vwc-option>
  <vwc-option value="algeria" text="Algeria">
    <vwc-flag slot="icon" code="DZ"></vwc-flag>
  </vwc-option>
  <vwc-option value="argentina" text="Argentina">
    {' '}
  </vwc-option>
  <vwc-option value="armenia" text="Armenia">
    <vwc-flag slot="icon" code="AM"></vwc-flag>
  </vwc-option>
  <vwc-option value="aruba" text="Aruba">
    <vwc-flag slot="icon" code="AW"></vwc-flag>
  </vwc-option>
  <vwc-option value="australia" text="Australia">
    <vwc-flag slot="icon" code="AU"></vwc-flag>
  </vwc-option>
</vwc-searchable-select>

External Tags

When set, the selected tags will not be displayed inside the component.

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

const countriesRef = ref<InstanceType<typeof VSearchableSelect> | null>(null);
const companyTypeRef = ref<InstanceType<typeof VSearchableSelect> | null>(null);
const selectedTags = ref<{ value: string; text: string }[]>([]);

function updateTags() {
const tags: { value: string; text: string }[] = [];
for (const selectRef of [countriesRef, companyTypeRef]) {
const el = selectRef.value?.element;
if (el?.selectedOptions) {
for (const opt of el.selectedOptions) {
tags.push({ value: opt.value, text: opt.text });
}
}
}
selectedTags.value = tags;
}

function onTagRemoved(value: string) {
for (const selectRef of [countriesRef, companyTypeRef]) {
const el = selectRef.value?.element;
const option = el?.options?.find((o: { value: string }) => o.value === value);
if (option) {
option.selected = false;
break;
}
}
updateTags();
}

onMounted(() => {
updateTags();
});

</script>

<template>
  <VSearchableSelect ref="countriesRef" external-tags multiple label="Countries" clearable @change="updateTags">
    <VOption value="AF" text="Afghanistan">
      <template #icon><VFlag code="AF" /></template>
    </VOption>
    <VOption value="AL" text="Albania">
      <template #icon><VFlag code="AL" /></template>
    </VOption>
    <VOption value="DZ" text="Algeria">
      <template #icon><VFlag code="DZ" /></template>
    </VOption>
  </VSearchableSelect>
  <VSearchableSelect ref="companyTypeRef" external-tags multiple label="Company Type" clearable @change="updateTags">
    <VOption value="ngo" text="Non-Governmental Organization" />
    <VOption value="gov" text="Governmental Organization" />
    <VOption value="edu" text="Educational Institution" />
  </VSearchableSelect>
  <VTagGroup class="tag-group">
    <VTag v-for="tag in selectedTags" :key="tag.value" :label="tag.text" removable :data-value="tag.value" @removed="onTagRemoved(tag.value)" />
  </VTagGroup>
</template>

<style scoped>
.tag-group {
  display: block;
  margin-top: 12px;
}
</style>

<vwc-searchable-select external-tags multiple label="Countries" clearable>
  <vwc-option value="AF" text="Afghanistan">
    <vwc-flag slot="icon" code="AF"></vwc-flag>
  </vwc-option>
  <vwc-option value="AL" text="Albania">
    <vwc-flag slot="icon" code="AL"></vwc-flag>
  </vwc-option>
  <vwc-option value="DZ" text="Algeria">
    <vwc-flag slot="icon" code="DZ"></vwc-flag>
  </vwc-option>
</vwc-searchable-select>
<vwc-searchable-select external-tags multiple label="Company Type" clearable>
  <vwc-option value="ngo" text="Non-Governmental Organization"></vwc-option>
  <vwc-option value="gov" text="Governmental Organization"></vwc-option>
  <vwc-option value="edu" text="Educational Institution"></vwc-option>
</vwc-searchable-select>
<vwc-tag-group></vwc-tag-group>

<script>
  function updateTags() {
    document.querySelector('vwc-tag-group').innerHTML = '';
    for (const option of document.querySelectorAll('vwc-option')) {
      if (option.selected) {
        const tag = document.createElement('vwc-tag');
        tag.label = option.text;
        tag.removable = true;
        tag.dataset.value = option.value;
        document.querySelector('vwc-tag-group').append(tag);
      }
    }
  }
  for (const select of document.querySelectorAll('vwc-searchable-select')) {
    select.addEventListener('change', updateTags);
  }
  updateTags();
  document.querySelector('vwc-tag-group').addEventListener('removed', (event) => {
    const option = document.querySelector(`vwc-option[value="${event.target.dataset.value}"]`);
    option.selected = false;
    updateTags();
  });
</script>

<style>
  vwc-tag-group {
    display: block;
    margin-top: 12px;
  }
</style>

Tag Connotation

The tag-connotation of Option attribute sets the connotation of the tags.

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

<template>
  <VSearchableSelect multiple>
    <VOption value="accent" text="accent" selected />
    <VOption tag-connotation="cta" value="cta" text="cta" selected />
  </VSearchableSelect>
</template>

<vwc-searchable-select multiple>
  <vwc-option value="accent" text="accent" selected></vwc-option>
  <vwc-option tag-connotation="cta" value="cta" text="cta" selected></vwc-option>
</vwc-searchable-select>

Enable Select All

Use the enable-select-all attribute to add Select All option at the top of the list.

Do not use enable-select-all together with max-selected. When max-selected is set to a positive number, the “Select All” option is hidden.

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

<template>
  <VSearchableSelect multiple label="Countries" enable-select-all select-all-text="Select all countries" deselect-all-text="Deselect all countries">
    <VOption value="afghanistan" text="Afghanistan">
      <template #icon><VFlag code="AF" /></template>
    </VOption>
    <VOption value="albania" text="Albania">
      <template #icon><VFlag code="AL" /></template>
    </VOption>
    <VOption value="algeria" text="Algeria">
      <template #icon><VFlag code="DZ" /></template>
    </VOption>
    <VOption value="argentina" text="Argentina">
      <template #icon><VFlag code="AR" /></template>
    </VOption>
    <VOption value="armenia" text="Armenia">
      <template #icon><VFlag code="AM" /></template>
    </VOption>
    <VOption value="aruba" text="Aruba">
      <template #icon><VFlag code="AW" /></template>
    </VOption>
    <VOption value="australia" text="Australia">
      <template #icon><VFlag code="AU" /></template>
    </VOption>
  </VSearchableSelect>
</template>

<vwc-searchable-select multiple label="Countries" enable-select-all select-all-text="Select all countries" deselect-all-text="Deselect all countries">
  <vwc-option value="afghanistan" text="Afghanistan">
    <vwc-flag slot="icon" code="AF"></vwc-flag>
  </vwc-option>
  <vwc-option value="albania" text="Albania">
    <vwc-flag slot="icon" code="AL"></vwc-flag>
  </vwc-option>
  <vwc-option value="algeria" text="Algeria">
    <vwc-flag slot="icon" code="DZ"></vwc-flag>
  </vwc-option>
  <vwc-option value="argentina" text="Argentina">
    <vwc-flag slot="icon" code="AR"></vwc-flag>
  </vwc-option>
  <vwc-option value="armenia" text="Armenia">
    <vwc-flag slot="icon" code="AM"></vwc-flag>
  </vwc-option>
  <vwc-option value="aruba" text="Aruba">
    <vwc-flag slot="icon" code="AW"></vwc-flag>
  </vwc-option>
  <vwc-option value="australia" text="Australia">
    <vwc-flag slot="icon" code="AU"></vwc-flag>
  </vwc-option>
</vwc-searchable-select>

Clearable

Adds a clear button to the input field, which clears the selected value(s) when clicked.

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

<template>
  <VSearchableSelect multiple label="Countries" clearable>
    <VOption value="AF" text="Afghanistan">
      <template #icon><VFlag code="AF" /></template>
    </VOption>
    <VOption value="AL" text="Albania">
      <template #icon><VFlag code="AL" /></template>
    </VOption>
    <VOption value="DZ" text="Algeria">
      <template #icon><VFlag code="DZ" /></template>
    </VOption>
  </VSearchableSelect>
</template>

<vwc-searchable-select multiple label="Countries" clearable>
  <vwc-option value="AF" text="Afghanistan">
    <vwc-flag slot="icon" code="AF"></vwc-flag>
  </vwc-option>
  <vwc-option value="AL" text="Albania">
    <vwc-flag slot="icon" code="AL"></vwc-flag>
  </vwc-option>
  <vwc-option value="DZ" text="Algeria">
    <vwc-flag slot="icon" code="DZ"></vwc-flag>
  </vwc-option>
</vwc-searchable-select>

Disabled

The disabled attribute disables the Searchable Select.

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

<template>
  <VSearchableSelect label="Country" disabled clearable>
    <VOption value="AF" text="Afghanistan" selected />
  </VSearchableSelect>
  <VSearchableSelect label="Country" disabled multiple clearable>
    <VOption value="AF" text="Afghanistan" selected />
  </VSearchableSelect>
</template>

<vwc-searchable-select label="Country" disabled clearable>
  <vwc-option value="AF" text="Afghanistan" selected></vwc-option>
</vwc-searchable-select>
<vwc-searchable-select label="Country" disabled multiple clearable>
  <vwc-option value="AF" text="Afghanistan" selected></vwc-option>
</vwc-searchable-select>

Loading

The loading attribute shows the component in a loading state.

If there are no options to display, the component shows a loading message. It can be customized using the loading-options slot.

See the asynchronous option loading use-case for an example of how to load options.

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

<template>
  <VSearchableSelect loading>
    <template #loading-options>
      <span>Loading results...</span>
    </template>
  </VSearchableSelect>
</template>

No Options

The no-options slot allows you to customize the message when there are no options to choose from.

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

<template>
  <VSearchableSelect label="Connect number">
    <template #no-options>
      <span>You do not have any numbers.</span>
    </template>
  </VSearchableSelect>
  <VSearchableSelect label="Connect number">
    <template #no-options>
      <div class="empty-state-wrapper">
        <VEmptyState headline="No numbers">
          <template #icon><VIcon name="phone-number-line" label="Phone number" /></template>
          You do not have any numbers yet.
        </VEmptyState>
      </div>
    </template>
  </VSearchableSelect>
</template>

<style scoped>
.empty-state-wrapper {
  margin: 24px;
}
</style>

<style>
  vwc-empty-state {
    margin: 24px;
  }
</style>
<vwc-searchable-select label="Connect number">
  <span slot="no-options">You do not have any numbers.</span>
</vwc-searchable-select>
<vwc-searchable-select label="Connect number">
  <vwc-empty-state slot="no-options" headline="No numbers">
    <vwc-icon slot="icon" name="phone-number-line" label="Phone number"></vwc-icon>
    You do not have any numbers yet.
  </vwc-empty-state>
</vwc-searchable-select>

No Matches

The no-matches slot allows you to customize the message that appears when no options match the search query.

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

<template>
  <VSearchableSelect label="Connect number">
    <VOption value="1" text="+1 1243 546789" />
    <template #no-matches>
      <span>No numbers found.</span>
    </template>
  </VSearchableSelect>
</template>