Version:

Install ​

shell
npm i @mate-vue/multi-select-combo-box

Import ​

vue
<script setup>
import { MateMultiSelectComboBox } from '@mate-vue/multi-select-combo-box';
</script>

Variants ​

Default ​

vue
<template>
  <MateMultiSelectComboBox label="Kategorien" helperText="Mehrere Optionen wählbar" :items="['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']" :selectedItems="['Option 1', 'Option 2']"></MateMultiSelectComboBox>
</template>

Required ​

vue
<template>
  <MateMultiSelectComboBox label="Pflichtfeld" required :items="['Option 1', 'Option 2', 'Option 3']"></MateMultiSelectComboBox>
</template>

Disabled ​

vue
<template>
  <MateMultiSelectComboBox label="Inaktiv" disabled :items="['Option 1', 'Option 2', 'Option 3']"></MateMultiSelectComboBox>
</template>

Read Only ​

vue
<template>
  <MateMultiSelectComboBox label="Nur lesen" readonly :items="['Option 1', 'Option 2', 'Option 3']" :selectedItems="['Option 1', 'Option 2']"></MateMultiSelectComboBox>
</template>

Invalid ​

vue
<template>
  <MateMultiSelectComboBox label="Ungültig" invalid errorMessage="Bitte mindestens eine Option auswählen." :items="['Option 1', 'Option 2', 'Option 3']"></MateMultiSelectComboBox>
</template>

Auto Expand Vertically ​

vue
<template>
  <MateMultiSelectComboBox label="Auto-expand" autoExpandVertically :items="['Option 1', 'Option 2', 'Option 3']" :selectedItems="['Option 1', 'Option 2']"></MateMultiSelectComboBox>
</template>