Skip to main content
Vue accessible multiselect

# API

# Props

<vue-accessible-multiselect> accepts some props:

Prop Description
options: array required. Array of multiselect options. Should be an array of objects that match the following pattern { value: any, label: string }
value: array required. Current value of multiselect.
label: string Multiselect label
placeholder: string Multiselect placeholder
disabled: boolean Whether multiselect is disabled
transition: object Through this object you can configure the transition of .v-multiselect__menu entrance and leave. Should match the following pattern { name: string, mode: string? }

# Slots

<vue-accessible-multiselect> provides you with some slots and scopedSlots you can use to fit your needs.

Slot Scope Description
label Label slot
prepend Prepend slot
placeholder { placeholder } Placeholder slot
selected { value, options } Selected slot
arrow Arrow slot
option { value, option } Option slot
no-options No options slot
# Example of possible usage of slots and scopedSlots
<vue-accessible-multiselect>
  <template v-slot:prepend>
    <svg viewBox="0 0 54 54">
      <path d="M27 1l8 17 19 3-14 13 4 19-17-9-17 9 3-19L0 21l19-3z" />
    </svg>
  </template>
  <template v-slot:label
    >😋 Select one of the following options:</template
  >
  <template v-slot:placeholder
    >🎃 Select one of the following options</template
  >
  <template v-slot:arrow>💎</template>
  <template v-slot:selected="{ value, options }">🔥 Woooow, {{ value }}</template>
  <template v-slot:option="{ option }"
    >{{ option.label }}</template
  >
</vue-accessible-multiselect>

  
        Copied!

← Keyboard shortcuts →

API | Vue accessible multiselect has loaded