brandv1.0
Utilities
Data Display
Data Entry
Feedback

Vue Select

Vue Select is a feature rich select/dropdown/typeahead component. It provides a default template that fits most use cases for a filterable select dropdown.

Basic example

vue-select accepts arrays of primitive values or objects to use as options through the options prop. 

							
                                
<template>
    <BCol md="8" sm="12" cols="12">
        <v-select
            v-model="selected"
            :options="colourOptions"
            :clearable="isClearable"
            :searchable="isSearchable"
            :disabled="isDisabled"
            :loading="isLoading"
            :dir="direction"
        ></v-select>
        <div class="mt-2">
            <BFormCheckbox id="clearable" v-model="isClearable" inline>
                clearable
            </BFormCheckbox>
            <BFormCheckbox id="searchable" v-model="isSearchable" inline>
                searchable
            </BFormCheckbox>
            <BFormCheckbox id="disabled" v-model="isDisabled" inline>
                disabled
            </BFormCheckbox>
            <BFormCheckbox id="isloading" v-model="isLoading" inline>
                isloading
            </BFormCheckbox>
            <BFormCheckbox id="rtl" v-model="direction" value="rtl" inline>
                rtl
            </BFormCheckbox>
            <BFormCheckbox id="ltr" v-model="direction" value="ltr" inline>
                ltr
            </BFormCheckbox>
        </div>
    </BCol>
</template>

<script>
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";

export default {
  components: {
    vSelect,
  },
  data() {
    return {
      isClearable: true,
      isSearchable: true,
      isDisabled: false,
      isLoading: false,
      direction: "auto",

      colourOptions: [
        { value: "ocean", label: "Ocean", color: "#00B8D9" },
        { value: "blue", label: "Blue", color: "#0052CC" },
        { value: "purple", label: "Purple", color: "#5243AA" },
        { value: "red", label: "Red", color: "#FF5630" },
        { value: "orange", label: "Orange", color: "#FF8B00" },
        { value: "yellow", label: "Yellow", color: "#FFC400" },
        { value: "green", label: "Green", color: "#36B37E" },
        { value: "forest", label: "Forest", color: "#00875A" },
        { value: "slate", label: "Slate", color: "#253858" },
        { value: "silver", label: "Silver", color: "#666666" },
      ],
      selected: { value: "blue", label: "Blue", color: "#0052CC" },
    };
  },
};
</script>
Props Value Default Description
options Array [] An array of strings or objects to be used as dropdown choices. If you are using an array of objects, vue-select will look for a label key (ex. [{label: 'Canada', value: 'CA'}]). A custom label key can be set with the label prop.
placeholder String "" Equivalent to the placeholder attribute on an <input>.
pushTags Boolean false When true, newly created tags will be added to the options list.
reduce Function option When working with objects, the reduce prop allows you to transform a given object to only the information you want passed to a v-model binding or @input event.
searchable Boolean true Enable/disable filtering the options.
taggable Boolean false Enable/disable creating options from searchInput.
appendToBody Boolean false Append the dropdown element to the end of the body and size/position it dynamically. Use it if you have overflow or z-index issues.
autocomplete String 'off' The value provided here will be bound to the autocomplete HTML attribute on the search input. Defaults to off.
autoscroll Boolean true When true, the dropdown will automatically scroll to ensure that the option highlighted is fully within the dropdown viewport when navigating with keyboard arrows.
clearable Boolean true Can the user clear the selected property?.
clearSearchOnSelect Boolean true Enables/disables clearing the search text when an option is selected.
closeOnSelect Boolean true Close a dropdown when an option is chosen. Set to false to keep the dropdown open (useful when combined with multi-select, for example).
createOption Function undefine User defined function for adding Options.
deselectFromDropdown Boolean false Determines whether the user can deselect an option by clicking it from within the dropdown menu.
dir String 'auto' Sets RTL support. Accepts ltr, rtl, auto.
disabled Boolean false Disable the entire component..
filterable Boolean true When true, existing options will be filtered by the search text. Should not be used in conjunction with taggable.
inputId String undefind Sets the id of the input element.
label String 'label' Tells vue-select what key to use when generating option labels when each option is an object.
loading Boolean false Show spinner if the component is in a loading state.
multiple Boolean false Equivalent to the multiple attribute on a <select> input.
noDrop Boolean false Disable the dropdown entirely.
transition String "fade" Sets a Vue transition property on the .dropdown-menu. vue-select does not include CSS for transitions, you'll need to add them yourself.
value null Contains the currently selected value. Very similar to a value attribute on an <input>. You can listen for changes using the 'input' event.
Multiple Select

Equivalent to the multiple attribute on a <select> input. 

							
                                
<template>
    <v-select v-model="selected" :options="colourOptions" multiple></v-select>
</template>

<script>
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";

export default {
  data() {
    return {
      colourOptions: [
        { label: "United States", value: "US" },
        { label: "Canada", value: "CA" },
        { label: "Mexico", value: "MX" },
        { label: "United Kingdom", value: "UK" },
        { label: "Germany", value: "DE" },
        { label: "France", value: "FR" },
        { label: "Japan", value: "JP" },
        { label: "China", value: "CN" },
        { label: "India", value: "IN" },
      ],
      selected: [
        { label: "United States", value: "US" },
        { label: "Canada", value: "CA" },
        { label: "India", value: "IN" },
      ],
    };
  },
};
</script>
Input Tags

You need to enable the taggable prop in vue-select. This prop allows users to create new options by typing and pressing Enter. 

							
                                
<template>
    <v-select
        v-model="selectedTags"
        :options="options"
        taggable
        @new-tag="addTag"
        placeholder="Select or add tags"
        multiple
    />
</template>

<script>
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";

export default {
  components: {
    CodeBlock,
    vSelect,
  },
  data() {
    return {
      selectedTags: [],
      options: ["Ocean", "Blue", "Purple", "Red"],
    };
  },
  methods: {
    addTag(newTag) {
      const tag = newTag.trim();
      if (tag && !this.options.includes(tag)) {
        this.options.push(tag);
      }
      this.selectedTags.push(tag);
    },
  },
};
</script>