MultiSelect

Example

Use v-model to bind selected values, and options as select options.

<template>
  <div class="uiv">
    <MultiSelect v-model="selected" :options="options" />
  </div>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Option1' },
  { value: 2, label: 'Option2' },
  { value: 3, label: 'Option3' },
  { value: 4, label: 'Option4' },
  { value: 5, label: 'Option5' },
]);
</script>

Multiple Limit

Use limit to restrict the maximum number of options user can select, no limit when set to 0.

<template>
  <div class="uiv">
    <MultiSelect v-model="selected" :options="options" :limit="3" />
  </div>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Option1' },
  { value: 2, label: 'Option2' },
  { value: 3, label: 'Option3' },
  { value: 4, label: 'Option4' },
  { value: 5, label: 'Option5' },
]);
</script>

Optional Sizes

Optional sizes sm and lg are supported. You can also add block prop to quickly apply width: 100% style to the component.




<template>
  <section class="uiv">
    <div>
      <MultiSelect v-model="selected" :options="options" size="sm" />
    </div>
    <br />
    <div>
      <MultiSelect v-model="selected" :options="options" />
    </div>
    <br />
    <div>
      <MultiSelect v-model="selected" :options="options" size="lg" />
    </div>
    <br />
    <div>
      <MultiSelect v-model="selected" :options="options" size="lg" block />
    </div>
  </section>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Option1' },
  { value: 2, label: 'Option2' },
  { value: 3, label: 'Option3' },
  { value: 4, label: 'Option4' },
  { value: 5, label: 'Option5' },
]);
</script>

Disabled options

Add disabled: true to an option to make it unselectable.

<template>
  <div class="uiv">
    <MultiSelect v-model="selected" :options="options" />
  </div>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Option1' },
  { value: 2, label: 'Option2' },
  { value: 3, label: 'Option3', disabled: true },
  { value: 4, label: 'Option4' },
  { value: 5, label: 'Option5', disabled: true },
]);
</script>

Disabled select

Add disabled to <multi-select> to disable the dropdown and click events.

<template>
  <div class="uiv">
    <MultiSelect v-model="selected" :options="options" disabled />
  </div>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Option1' },
  { value: 2, label: 'Option2' },
  { value: 3, label: 'Option3' },
  { value: 4, label: 'Option4' },
  { value: 5, label: 'Option5' },
]);
</script>

Collapse selected

Collapse multiple selected items into a text by using collapse-selected prop.

<template>
  <div class="uiv">
    <MultiSelect v-model="selected" :options="options" collapse-selected />
  </div>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Option1' },
  { value: 2, label: 'Option2' },
  { value: 3, label: 'Option3' },
  { value: 4, label: 'Option4' },
  { value: 5, label: 'Option5' },
]);
</script>

Option groups

If you need grouped options, simply add group (String) as the name to them.

<template>
  <div class="uiv">
    <MultiSelect v-model="selected" :options="options" />
  </div>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Apple', group: 'Fruit' },
  { value: 2, label: 'Banana', group: 'Fruit' },
  { value: 3, label: 'Orange', group: 'Fruit' },
  { value: 4, label: 'Red', group: 'Color' },
  { value: 5, label: 'Green', group: 'Color' },
]);
</script>

Filterable

Add filterable to append filter input before options.

By default, options are filtered by item value and label (case ignored), use a custom filter-function to override it if needed.

<template>
  <div class="uiv">
    <MultiSelect v-model="selected" :options="options" filterable />
  </div>
</template>

<script setup>
import { MultiSelect } from 'uiv';
import { ref } from 'vue';

const selected = ref([]);
const options = ref([
  { value: 1, label: 'Option1' },
  { value: 2, label: 'Option2' },
  { value: 3, label: 'Option3' },
  { value: 4, label: 'Option4' },
  { value: 5, label: 'Option5' },
]);
</script>

API Reference

MultiSelect

Props

NameTypeDefaultRequiredDescription
v-modelArrayThe selected values.
optionsArrayThe select options.
label-keyStringlabelIdentity key name for label.
value-keyStringvalueIdentity key name for value.
limitBoolean0Maximum number of options user can select, no limit when set to 0.
sizeStringOptional sizes, supported: sm / lg.
blockBooleanfalseApply block level style.
placeholderStringSelect...The default text displayed when no options are selected.
splitString,The options display spliter.
filterableBooleanfalseAppend filter input before options (default is filter by item value and label, case ignored).
filter-placeholderStringSearch...The default text displayed in filter input.
filter-auto-focusBooleantrueAuto focus on filter input.
filter-functionFunctionCustom filter function, with one param as input string, and returns the filtered array.
disabledBooleanfalseDisable the select component.
collapse-selectedBooleanfalseCollapse multiple selected items into a text.
append-to-bodyBooleanfalseAppend the dropdown to body.
selected-iconStringglyphicon glyphicon-okIcon displayed in option while selected.
item-selected-classStringThe class applied to the selected list item.

Events

NameParamsDescription
changevalueTriggers when the selected value changes.
visible-changethe visible status (true / false)Triggers when the dropdown toggles.
limit-exceedTriggers when the selected value length exceeded limit.
focuseventTriggers when input focuses.
blureventTriggers when input blurs.

Slots

NameDescription
optionThe option scoped slot, with item prop.