MultiSelect

Example

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

<template>
  <MultiSelect v-model="selected" :options="options" />
</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>
  <MultiSelect v-model="selected" :options="options" :limit="3" />
</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>
  <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>
</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>
  <MultiSelect v-model="selected" :options="options" />
</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>
  <MultiSelect v-model="selected" :options="options" disabled />
</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>
  <MultiSelect v-model="selected" :options="options" collapse-selected />
</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>
  <MultiSelect v-model="selected" :options="options" />
</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>
  <MultiSelect v-model="selected" :options="options" filterable />
</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

Name	Type	Default	Required	Description
v-model	Array		✔	The selected values.
options	Array		✔	The select options.
label-key	String	label		Identity key name for label.
value-key	String	value		Identity key name for value.
limit	Boolean	0		Maximum number of options user can select, no limit when set to 0.
size	String			Optional sizes, supported: sm / lg.
block	Boolean	false		Apply block level style.
placeholder	String	Select...		The default text displayed when no options are selected.
split	String	,		The options display spliter.
filterable	Boolean	false		Append filter input before options (default is filter by item value and label, case ignored).
filter-placeholder	String	Search...		The default text displayed in filter input.
filter-auto-focus	Boolean	true		Auto focus on filter input.
filter-function	Function			Custom filter function, with one param as input string, and returns the filtered array.
disabled	Boolean	false		Disable the select component.
collapse-selected	Boolean	false		Collapse multiple selected items into a text.
append-to-body	Boolean	false		Append the dropdown to body.
selected-icon	String	glyphicon glyphicon-ok		Icon displayed in option while selected.
item-selected-class	String			The class applied to the selected list item.

Events

Name	Params	Description
change	value	Triggers when the selected value changes.
visible-change	the visible status (true / false)	Triggers when the dropdown toggles.
limit-exceed		Triggers when the selected value length exceeded limit.
focus	event	Triggers when input focuses.
blur	event	Triggers when input blurs.

Slots

Name	Description
option	The option scoped slot, with item prop.