oa/documentation/plugins/multiselect/multiselect-multiple-custom-label-documentation.md

optionMultipleObject, valueMultipleObject

optionMultipleObject	valueMultipleObject
batman robin joker Batman Robin Joker	robin

Custom label

The <Multiselect /> component in multiple mode has a default label when you start selecting options. You can change the way the message is formatted by using the #multiplelabel custom slot to configure your message.

<script setup lang="ts">
import Multiselect from '@vueform/multiselect'
const valueMultipleObject = ref(['robin'])
const optionMultipleObject = ref({
  batman: 'Batman',
  robin: 'Robin',
  joker: 'Joker',
})
</script>

<template>
  <VField v-slot="{ id }" class="demo-field mb-6">
    <VControl>
      <Multiselect
        v-model="valueMultipleObject"
        :attrs="{ id }"
        mode="multiple"
        placeholder="Select your characters"
        :options="optionMultipleObject"
      >
        <template #multiplelabel="{ values }">
          <div class="multiselect-multiple-label">
            {{ values.length }} characters selected
          </div>
        </template>
      </Multiselect>
    </VControl>
  </VField>
</template>

{{ values.length }} characters selected

{{ values.length }} characters selected

{{ values.length }} characters selected