oa/documentation/plugins/multiselect/multiselect-select-slot-documentation.md

selectSlotOptions, selectSlotValue

selectSlotOptions	selectSlotValue
value name icon javascript Javascript /images/icons/stacks/js.svg value name icon reactjs ReactJS /images/icons/stacks/reactjs.svg value name icon vuejs VueJS /images/icons/stacks/vuejs.svg	batman

Image Select

The <Multiselect /> component can be used with a custom template to show images for options and selected option. 2 CSS modifiers are available for images radius: is-curved and is-rounded.

<script setup lang="ts">
const selectSlotValue
const selectSlotOptions = [
  {
    value: 'javascript',
    name: 'Javascript',
    icon: '/images/icons/stacks/js.svg',
  },
  {
    value: 'spiderman',
    name: 'ReactJS',
    icon: '/images/icons/stacks/reactjs.svg',
  },
  {
    value: 'vuejs',
    name: 'VueJS',
    icon: '/images/icons/stacks/vuejs.svg',
  },
]
</script>

<template>
  <VField v-slot="{ id }" class="is-image-select">
    <VControl>
      <Multiselect
        v-model="selectSlotValue"
        :attrs="{ id }"
        placeholder="Select a language"
        label="name"
        :options="selectSlotOptions"
      >
        <template #singlelabel="{ value }">
          <div class="multiselect-single-label">
            <img
              class="select-label-icon"
              :src="value.icon"
              alt=""
            >
            <span class="select-label-text">
              {{ value.name }}
            </span>
          </div>
        </template>
        <template #option="{ option }">
          <img
            class="select-option-icon"
            :src="option.icon"
            alt=""
          >
          <span class="select-label-text">
            {{ option.name }}
          </span>
        </template>
      </Multiselect>
    </VControl>
  </VField>
</template>

{{ value.name }}

{{ option.name }}

{{ value.name }}

{{ option.name }}

{{ value.name }}

{{ option.name }}