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

selectSlotOptions, selectSlotValue

selectSlotOptions

selectSlotValue

value name icon alice Alice Carasca https://media.cssninja.io/content/avatars/7.jpg value name icon erik Erik Kovalsky /images/avatars/svg/vuero-1.svg value name icon melany Melany Wallace https://media.cssninja.io/content/avatars/25.jpg value name icon tara Tara Svenson https://media.cssninja.io/content/avatars/13.jpg value name icon mary Mary Lebowski https://media.cssninja.io/content/avatars/5.jpg value name icon irina Irina Vierbovsky https://media.cssninja.io/content/avatars/23.jpg value name icon jonathan Jonathan Krugger https://media.cssninja.io/content/avatars/32.jpg

Users with search

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 = ref()
const selectSlotOptions = [
  {
    value: 'alice',
    name: 'Alice Carasca',
    icon: 'https://media.cssninja.io/content/avatars/7.jpg',
  },
  {
    value: 'erik',
    name: 'Erik Kovalsky',
    icon: '/images/avatars/svg/vuero-1.svg',
  },
  {
    value: 'melany',
    name: 'melany Wallace',
    icon: 'https://media.cssninja.io/content/avatars/25.jpg',
  },
  {
    value: 'tara',
    name: 'Tara Svenson',
    icon: 'https://media.cssninja.io/content/avatars/13.jpg',
  },
  {
    value: 'mary',
    name: 'Mary Lebowski',
    icon: 'https://media.cssninja.io/content/avatars/5.jpg',
  },
  {
    value: 'irina',
    name: 'Irina Vierbovsky',
    icon: 'https://media.cssninja.io/content/avatars/23.jpg',
  },
  {
    value: 'jonathan',
    name: 'Jonathan Krugger',
    icon: 'https://media.cssninja.io/content/avatars/32.jpg',
  },
]
</script>

<template>
  <VField v-slot="{ id }">
    <VControl>
      <Multiselect
        v-model="selectSlotValue"
        :attrs="{ id }"
        placeholder="Select a member"
        label="name"
        :options="selectSlotOptions"
        :searchable="true"
        track-by="name"
        :max-height="145"
      >
        <template #singlelabel="{ value }">
          <div class="multiselect-single-label">
            <img
              class="select-label-icon"
              :src="value.icon"
              alt=""
            >
            {{ value.name }}
          </div>
        </template>
        <template #option="{ option }">
          <img
            class="select-option-icon"
            :src="option.icon"
            alt=""
          >
          {{ option.name }}
        </template>
      </Multiselect>
    </VControl>
  </VField>
</template>

{{ value.name }}

{{ option.name }}

{{ value.name }}

{{ option.name }}

{{ value.name }}

{{ option.name }}