uivMultiSelect
Example
Use v-model to bind selected values, and options as select options.
vue
<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.
vue
<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.
vue
<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.
vue
<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.
vue
<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.
vue
<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.
vue
<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.
vue
<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. |