uiv

# MultiSelect

# Example

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

 
Select...
<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { 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.

 
Select...
<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" :limit="3" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { 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>
      <multi-select v-model="selected" :options="options" size="sm" />
    </div>
    <br />
    <div>
      <multi-select v-model="selected" :options="options" />
    </div>
    <br />
    <div>
      <multi-select v-model="selected" :options="options" size="lg" />
    </div>
    <br />
    <div>
      <multi-select v-model="selected" :options="options" size="lg" block />
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { 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.

 
Select...
<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { 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.

 
Select...
<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" disabled />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { 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.

 
Select...
<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" collapse-selected />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { 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.

 
Select...
<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { 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.

 
Select...
<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" filterable />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3' },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5' },
      ],
    }
  },
}
</script>

# API Reference

# MultiSelect (opens new window)

# 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.

← Typeahead →