Vue Select

https://vue-select.org
Admin
Vue Select is a feature-rich, lightweight dropdown and autocomplete select component for Vue.js...
Tokens:30,574
Snippets:338
Trust Score:8.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install vue-select with Yarn or NPM

Source: https://vue-select.org/guide/install.html

Install vue-select using Yarn or NPM. For Vue 2, use the stable version; for Vue 3, use the beta version. The command installs the package and its dependencies.

```bash
# vue 2
yarn add vue-select

# vue 3
yarn add vue-select@beta

# or, using NPM
npm install vue-select

```

--------------------------------

### Example usage of search event

Source: https://vue-select.org/api/events.html

Example usage of the search event in a template, showing how to toggle loading and fetch options.

```html
<!-- example usage -->
<v-select
    @search="(search, loading) => { 
      loading(true)
      fetchOptions(search).then(() => loading(false))
    }"
/>

```

--------------------------------

### Define options array

Source: https://vue-select.org/guide/upgrading.html

Example data structure for the options prop.

```javascript
const options = [{country: 'Canada', code: 'CA'},];
```

--------------------------------

### search

Source: https://vue-select.org/api/events.html

Emitted anytime the search string changes. Passes the search string and a function to toggle loading state. See the AJAX Guide for a complete example.

```APIDOC
## Event: search

### Description
Emitted anytime the search string changes. Passes the search string and a function to toggle loading state. See the AJAX Guide for a complete example.

### Parameters
- **searchString** (String) - the search string
- **toggleLoading** (Function) - function to toggle loading state, accepts true or false boolean

### Example
```
this.$emit('search', this.search, this.toggleLoading);
```

### Usage Example
```
<!-- example usage -->
<v-select
    @search="(search, loading) => { 
      loading(true)
      fetchOptions(search).then(() => loading(false))
    }"
/>
```
```

--------------------------------

### Options array with object data

Source: https://vue-select.org/guide/values.html

Example data structure used to demonstrate the reduce callback. The options array contains objects with code and country keys.

```javascript
let options = [{code: 'CA', country: 'Canada'}];
```

--------------------------------

### Deep nested value example

Source: https://vue-select.org/guide/values.html

Example object with a deeply nested meta.code value to demonstrate reduce with nested properties.

```javascript
{
  country: 'canada',
  meta: {
    code: 'ca'
    provinces: [...],
  }
}
```

--------------------------------

### Example option object for selectable

Source: https://vue-select.org/guide/selectable.html

An example of an option object passed to the component when using `selectable`. It contains a `title` and an `author` object with `firstName` and `lastName` properties.

```javascript
{ 
    title: "Right Ho Jeeves", 
    author: { firstName: "P.D", lastName: "Woodhouse" }, 
}
```

--------------------------------

### Define object structure for options

Source: https://vue-select.org/guide/options.html

Example of an object structure used within the options array.

```javascript
{
  countryCode: "CA",
  countryName: "Canada"
}
```

--------------------------------

### Emit search event

Source: https://vue-select.org/api/events.html

Triggered anytime the search string changes. Passes the search string and a toggleLoading function. See the AJAX Guide for a complete example.

```javascript
/**
 * @param {String} searchString - the search string
 * @param {Function} toggleLoading - function to toggle loading state, accepts true or false boolean
 */
this.$emit('search', this.search, this.toggleLoading);

```

--------------------------------

### Implement Dark Mode with CSS Variables

Source: https://vue-select.org/guide/css.html

This example demonstrates how to scope CSS variables to a specific Vue Select component instance to achieve a dark mode aesthetic.

```vue
<template>
  <div style="background: #282c34; padding: 1rem; border-radius: 0.3rem">
    <v-select :options="countries" />
  </div>
</template>

<script>
import countries from '../data/countries.js'
export default {
  data: () => ({ countries }),
}
</script>

<style scoped>
>>> {
  --vs-controls-color: #664cc3;
  --vs-border-color: #664cc3;

  --vs-dropdown-bg: #282c34;
  --vs-dropdown-color: #cc99cd;
  --vs-dropdown-option-color: #cc99cd;

  --vs-selected-bg: #664cc3;
  --vs-selected-color: #eeeeee;

  --vs-search-input-color: #eeeeee;

  --vs-dropdown-option--active-bg: #664cc3;
  --vs-dropdown-option--active-color: #eeeeee;
}
</style>
```

--------------------------------

### Custom option slot template with script

Source: https://vue-select.org/api/slots.html

Example of customizing the option slot to display book titles and authors. The slot receives the option object and destructures title and author. Includes the component's data with a sample book.

```html
<template>
  <v-select :options="books" label="title">
    <template #option="{ title, author }">
      <h3 style="margin: 0">{{ title }}</h3>
      <em>{{ author.firstName }} {{ author.lastName }}</em>
    </template>
  </v-select>
</template>

<script>
export default {
  data: () => ({
    books: [
      {
        title: "Old Man's War",
        author: {
          firstName: 'John',
          lastName: 'Scalzi',
        },
      },
    ],
  }),
}
</script>

```

--------------------------------

### Import and register vue-select component

Source: https://vue-select.org/guide/install.html

Import the vue-select component and register it globally with Vue. This is required after installation to use the component in templates.

```javascript
import Vue from 'vue'
import vSelect from 'vue-select'

Vue.component('v-select', vSelect)

```

--------------------------------

### Autocomplete email addresses with mapKeyDown

Source: https://vue-select.org/guide/keydown.html

Example of using map-keydown to autocomplete email addresses. It listens for the '@' key (keyCode 50) and appends '@gmail.com' to the current search text when the search length is greater than 0. The handlers method spreads the default map and adds a custom handler for keyCode 50.

```html
<template>
  <v-select
    taggable
    multiple
    no-drop
    :map-keydown="handlers"
    placeholder="enter an email"
  />
</template>

<script>
export default {
  name: 'CustomHandlers',
  methods: {
    handlers: (map, vm) => ({
      ...map,
      50: (e) => {
        e.preventDefault()
        if (e.key === '@' && vm.search.length > 0) {
          vm.search = `${vm.search}@gmail.com`
        }
      },
    }),
  },
}
</script>
```

--------------------------------

### Custom search slot template

Source: https://vue-select.org/api/slots.html

Example of overriding the search slot with a custom input element. Binds the provided attributes and events using v-bind and v-on, and adds a maxlength attribute. Note that the default styling class vs__search is added to maintain default appearance.

```html
<template>
  <v-select>
    <template #search="{ attributes, events }">
      <input
        maxlength="1"
        class="vs__search"
        v-bind="attributes"
        v-on="events"
      />
    </template>
  </v-select>
</template>

```

--------------------------------

### Custom open-indicator slot template

Source: https://vue-select.org/api/slots.html

Example of overriding the open-indicator slot with a custom span element. The attributes are bound using v-bind to preserve accessibility and styling.

```html
<template>
  <v-select>
    <template #open-indicator="{ attributes }">
      <span v-bind="attributes">🔽</span>
    </template>
  </v-select>
</template>

```

--------------------------------

### Enable RTL support

Source: https://vue-select.org/guide/localization.html

Use the dir prop to set the text direction to rtl, ltr, or auto.

```html
<v-select dir="rtl"></v-select>
```

--------------------------------

### dir

Source: https://vue-select.org/api/props.html

String prop that sets RTL support. Accepts 'ltr', 'rtl', or 'auto'. Defaults to 'auto'.

```APIDOC
## dir

### Description
Sets RTL support. Accepts 'ltr', 'rtl', 'auto'.

### Type
String

### Default
"auto"

### Example
```js
dir: {
	type: String,
	default: "auto"
}
```
```

--------------------------------

### fetchOptions method with search and loading parameters

Source: https://vue-select.org/guide/ajax.html

Handles the search event. The loading function toggles the internal loading property to show or hide the spinner. Call loading(true) before async work and loading(false) after.

```javascript
/**
 * Triggered when the search text changes.
 *
 * @param search  {String}    Current search text
 * @param loading {Function}	Toggle loading class
 */
fetchOptions (search, loading) {
  //  ... do some asynchronous stuff!  
},
```

--------------------------------

### Vue Select taggable and reduce configuration

Source: https://vue-select.org/guide/values.html

Shows how to define the createOption prop when using taggable and reduce together to ensure created tags match the expected option structure.

```javascript
const options = [
    {
        title: "HTML5",
        author: {
            firstName: "Remy",
            lastName: "Sharp"
        }
    }
];
```

```html
<v-select
    taggable
    multiple
    label="title"
    :options="options"
    :create-option="book => ({ title: book, author: { firstName: '', lastName: '' } })"
    :reduce="book => `${book.author.firstName} ${book.author.lastName}`"
/>
```

--------------------------------

### Configure v-select for List Autocomplete with Automatic Selection

Source: https://vue-select.org/guide/accessibility.html

Uses default settings to present suggested values where the first suggestion is automatically highlighted.

```html
<v-select :options="['No Autocomplete', 'List Autocomplete']" />
```

--------------------------------

### Configure custom label key

Source: https://vue-select.org/guide/options.html

Use the label prop to specify which object key should be displayed as the option text.

```html
<v-select label="countryName" :options="countries"></v-select>
```

--------------------------------

### dir prop definition

Source: https://vue-select.org/api/props.html

String prop, default "auto". Sets RTL support; accepts 'ltr', 'rtl', or 'auto'.

```javascript
dir: {
	type: String,
	default: "auto"
},

```

--------------------------------

### Configure UX Props

Source: https://vue-select.org/sandbox.html

Props for adjusting user experience settings like tab selection and menu closing.

```html
:select-on-tab="false"
:close-on-select="true"
```

--------------------------------

### Vue Select reduce prop example

Source: https://vue-select.org/guide/values.html

Demonstrates the reduce prop where the selected value is an ID not present in the options array, causing the component to display the raw value.

```vue
<template>
  <v-select
    v-model="selected"
    :reduce="(option) => option.id"
    :options="[
      { label: 'One', id: 1 },
      { label: 'Two', id: 2 },
    ]"
  />
</template>

<script>
export default {
  data() {
    return {
      selected: 3,
    }
  },
}
</script>
```

--------------------------------

### Replace index prop with reduce

Source: https://vue-select.org/guide/upgrading.html

Comparison of v2.x index prop usage versus v3.x reduce prop usage.

```html
<!-- v2: using index --->
<v-select :options="options" label="country" index="code"  />

<!-- v3: using reduce --->
<v-select :options="options" label="country" :reduce="country => country.code" />
```

--------------------------------

### open

Source: https://vue-select.org/api/events.html

Triggered when the dropdown is open.

```APIDOC
## Event: open

### Description
Triggered when the dropdown is open.

### Example
```
this.$emit("open");
```
```

--------------------------------

### Override OpenIndicator component per instance

Source: https://vue-select.org/guide/components.html

Use the `components` prop to replace the default OpenIndicator (caret) with a custom render function. The example shows a span with a toggle class.

```html
<v-select :components="{OpenIndicator}" />

```

```javascript
export default {
  data: () => ({
    selected: ['Canada'],
    OpenIndicator: {
      render: createElement => createElement('span', {class: {'toggle': true}}),
    },
  }),
};

```

--------------------------------

### getOptionLabel prop default implementation

Source: https://vue-select.org/api/props.html

Default callback for generating label text. If the option is an object, returns option[this.label]. If the label key does not exist, logs a warning. For non-object options, returns the option as-is.

```javascript
getOptionLabel: {
  type: Function,
  default(option) {
    if (typeof option === 'object') {
      if (!option.hasOwnProperty(this.label)) {
        return console.warn(
          `[vue-select warn]: Label key "option.${this.label}" does not` +
          ` exist in options object ${JSON.stringify(option)}.\n` +
          'https://vue-select.org/api/props.html#getoptionlabel'
        )
      }
      return option[this.label]
    }
    return option;
  }
},
```

--------------------------------

### Override Deselect component per instance

Source: https://vue-select.org/guide/components.html

Use the `components` prop to replace the default Deselect component with a custom render function. The example shows a simple span with a cross emoji.

```html
<v-select :components="{Deselect}" />

```

```javascript
export default {
  data: () => ({
    Deselect: {
      render: createElement => createElement('span', '❌'),
    },
  }),
};

```

--------------------------------

### loading

Source: https://vue-select.org/api/props.html

Show spinner if the component is in a loading state.

```APIDOC
## loading

### Description
Show spinner if the component is in a loading state.

### Type
Boolean

### Default
false

### Example
```js
loading: {
	type: Boolean,
	default: false
}
```
```

--------------------------------

### selectOnTab

Source: https://vue-select.org/api/props.html

When true, hitting the 'tab' key will select the current select value.

```APIDOC
## selectOnTab

### Description
When true, hitting the 'tab' key will select the current select value.

### Type
Boolean

### Default
false

### Example
```selectOnTab: {
	type: Boolean,
	default: false
}
```
```

--------------------------------

### Replace onChange and onInput callbacks with input event

Source: https://vue-select.org/guide/upgrading.html

Migrating from the on-change prop to the input event.

```html
<!-- version 2: -->
<v-select :on-change="doSomething" />

<!-- version 3: -->
<v-select @input="doSomething" />
```

--------------------------------

### option:selecting

Source: https://vue-select.org/api/events.html

Triggered after an option has been selected, before updating internal state. Available in v3.11.0+.

```APIDOC
## Event: option:selecting

### Description
Triggered after an option has been selected, before updating internal state. Available in v3.11.0+.

### Parameters
- **selectedOption** (Object) - The selected option.

### Example
```
this.$emit("option:selecting", selectedOption);
```
```

--------------------------------

### Override Vue Select styles with a custom class

Source: https://vue-select.org/guide/css.html

Add a custom class to the v-select component and use it to override default styles. The example sets background, border, color, text-transform, and font-variant for the search placeholder, dropdown toggle, and dropdown menu, and changes the fill color of the clear and open indicator icons.

```HTML
<template>
  <div>
    <v-select
      class="style-chooser"
      placeholder="Choose a Styling Option"
      :options="['Components', 'CSS / Variables', 'Slots']"
    />
  </div>
</template>

<style>
.style-chooser .vs__search::placeholder,
.style-chooser .vs__dropdown-toggle,
.style-chooser .vs__dropdown-menu {
  background: #dfe5fb;
  border: none;
  color: #394066;
  text-transform: lowercase;
  font-variant: small-caps;
}

.style-chooser .vs__clear,
.style-chooser .vs__open-indicator {
  fill: #394066;
}
</style>
```

--------------------------------

### Vue Select in v-for with anonymous @input handler

Source: https://vue-select.org/guide/loops.html

Use this pattern when rendering Vue Select inside a v-for loop (e.g., a table) and you need to know which row emitted the event. The @input handler is an inline arrow function that passes the person object and the selected country to the updateCountry method. This example uses local data instead of Vuex for brevity, but the same approach applies with Vuex.

```HTML
<template>
  <table>
    <tr>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr v-for="person in people" :key="person.name">
      <td>{{ person.name }}</td>
      <td>
        <v-select
          :options="options"
          :value="person.country"
          @input="(country) => updateCountry(person, country)"
        />
      </td>
    </tr>
  </table>
</template>

<script>
import countries from '../data/countries'

export default {
  data: () => ({
    people: [
      { name: 'John', country: '' },
      { name: 'Jane', country: '' },
    ],
  }),
  computed: {
    options: () => countries,
  },
  methods: {
    updateCountry(person, country) {
      person.country = country
    },
  },
}
</script>

<style scoped>
table {
  display: table;
  width: 100%;
}
</style>
```

--------------------------------

### Replace onSearch prop with search event

Source: https://vue-select.org/guide/upgrading.html

Migrating from the on-search prop to the search event.

```html
<!-- version 2: -->
<v-select :on-search="doSomeAjax" />

<!-- version 3: -->
<v-select @search="doSomeAjax" />
```

--------------------------------

### createOption

Source: https://vue-select.org/api/props.html

Function prop that defines how new options are created. The default function emits an 'option:created' event and returns the new option.

```APIDOC
## createOption

### Description
User defined function for adding Options.

### Type
Function

### Default
```js
function (newOption) {
  if (typeof this.optionList[0] === 'object') {
    newOption = {[this.label]: newOption}
  }

  this.$emit('option:created', newOption)
  return newOption
}
```

### Example
```js
createOption: {
  type: Function,
  default(newOption) {
    if (typeof this.optionList[0] === 'object') {
      newOption = {[this.label]: newOption}
    }

    this.$emit('option:created', newOption)
    return newOption
  }
}
```
```

--------------------------------

### pushTags

Source: https://vue-select.org/api/props.html

When true, newly created tags will be added to the options list.

```APIDOC
## pushTags

### Description
When true, newly created tags will be added to the options list.

### Type
Boolean

### Default
false

### Example
```
pushTags: {
	type: Boolean,
	default: false
},
```
```

--------------------------------

### JavaScript: Initialize Vue with Vue Select

Source: https://vue-select.org/validation.html

Registers the Vue Select component and creates a Vue instance bound to the #app element with a selected data property.

```javascript
Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data:  {
    selected: null
  }
})
```

--------------------------------

### Configure v-select for List Autocomplete with Manual Selection

Source: https://vue-select.org/guide/accessibility.html

Enables taggable mode to allow users to type and select from suggested values that correspond to their input.

```html
<v-select taggable :options="['No Autocomplete', 'List Autocomplete']" />
```

--------------------------------

### placeholder

Source: https://vue-select.org/api/props.html

Equivalent to the placeholder attribute on an <input>.

```APIDOC
## placeholder

### Description
Equivalent to the placeholder attribute on an <input>.

### Type
String

### Default
""

### Example
```js
placeholder: {
	type: String,
	default: ""
}
```
```

--------------------------------

### getOptionKey prop default implementation

Source: https://vue-select.org/api/props.html

Default callback for generating a unique option key. Returns option.id if the option is an object with an id, otherwise serializes the option to JSON. If serialization fails, logs a warning and returns null. The key must be unique for each option.

```javascript
getOptionKey: {
  type: Function,
  default(option) {
    if (typeof option === 'object' && option.id) {
      return option.id
    } else {
      try {
        return JSON.stringify(option)
      } catch(e) {
        return console.warn(
          `[vue-select warn]: Could not stringify option ` +
          `to generate unique key. Please provide 'getOptionKey' prop ` +
          `to return a unique key for each option.\n` +
          'https://vue-select.org/api/props.html#getoptionkey'
        )
        return null
      }
    }
  }
},
```

--------------------------------

### Configure Localization Props

Source: https://vue-select.org/sandbox.html

Props for setting the text direction for internationalization.

```html
dir="rtl" dir="ltr"
```

--------------------------------

### loading prop definition

Source: https://vue-select.org/api/props.html

Show spinner if the component is in a loading state. Defaults to false.

```javascript
loading: {
	type: Boolean,
	default: false
},

```

--------------------------------

### Define and implement loading spinner slot

Source: https://vue-select.org/guide/localization.html

The spinner slot allows replacing the default loading indicator. The implementation shows how to inject a custom icon.

```html
<slot name="spinner">
	<div class="spinner" v-show="mutableLoading">Loading...</div>
</slot>
```

```html
<v-select>
	<i slot="spinner" class="icon icon-spinner"></i>
</v-select>
```

--------------------------------

### Define and implement no-options text slot

Source: https://vue-select.org/guide/localization.html

The no-options slot allows replacing the default text displayed when no options match the search. The implementation shows how to provide custom content.

```html
<slot name="no-options">Sorry, no matching options.</slot>
```

```html
<v-select>
	<div slot="no-options">No Options Here!</div>
</v-select>
```

--------------------------------

### Vuex integration with value and input

Source: https://vue-select.org/guide/values.html

Bind the value prop to a Vuex store property and use the input event to trigger mutations or actions when the selection changes.

```html
<v-select :value="$store.myValue" @input="setSelected" />
```

```javascript
methods: {
    setSelected(value)
    {
        //  trigger a mutation, or dispatch an action  
    }
}
```

--------------------------------

### Configure Basic Features Props

Source: https://vue-select.org/sandbox.html

Commonly adjusted props for basic vue-select functionality.

```html
:multiple="false"
:disabled="false"
:clearable="true"
:searchable="true"
:filterable="true"
```

--------------------------------

### Load vue-select in the browser via UMD

Source: https://vue-select.org/guide/install.html

Load Vue.js, vue-select JS, and vue-select CSS via CDN. You can use the latest release or pin a specific version. The component is accessible via the VueSelect.VueSelect global variable.

```html
<!-- include VueJS first -->
<script src="https://unpkg.com/vue@latest"></script>

<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<!-- or point to a specific vue-select release -->
<script src="https://unpkg.com/vue-select@3.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">

```

--------------------------------

### Replace change event with input event

Source: https://vue-select.org/guide/upgrading.html

The change event is removed in v3.x; use the input event instead.

```html
<!-- version 2: -->
<v-select @change="doSomething" />

<!-- version 3: -->
<v-select @input="doSomething" />
```

--------------------------------

### multiple

Source: https://vue-select.org/api/props.html

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

```APIDOC
## multiple

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

### Type
Boolean

### Default
false

### Example
```js
multiple: {
	type: Boolean,
	default: false
}
```
```

--------------------------------

### Syncing with v-model

Source: https://vue-select.org/guide/values.html

Use v-model to sync the selected value with a parent component. This works with both primitives and objects, and returns an array when the multiple prop is enabled.

```html
<v-select v-model="selected" />
```

--------------------------------

### Custom no-options slot with search and searching props

Source: https://vue-select.org/guide/slots.html

Use the `no-options` slot to replace the default 'Sorry, no matching options' text. The slot provides `search` and `searching` props to show contextual messages based on whether the user is searching.

```html
<template>
  <v-select>
    <template v-slot:no-options="{ search, searching }">
      <template v-if="searching">
        No results found for <em>{{ search }}</em
        >.
      </template>
      <em v-else style="opacity: 0.5">Start typing to search for a country.</em>
    </template>
  </v-select>
</template>

<script>
export default {
  name: 'BetterNoOptions',
}
</script>
```

--------------------------------

### placeholder prop definition

Source: https://vue-select.org/api/props.html

Equivalent to the placeholder attribute on an <input>. Defaults to an empty string.

```javascript
placeholder: {
	type: String,
	default: ""
},

```

--------------------------------

### Register vue-select component in browser

Source: https://vue-select.org/guide/install.html

Register the component globally using the VueSelect.VueSelect global variable after loading the UMD module.

```javascript
Vue.component('v-select', VueSelect.VueSelect);

```

--------------------------------

### Available CSS Variables (3.18+)

Source: https://vue-select.org/guide/css.html

A comprehensive list of CSS custom properties available for configuring the component's colors, fonts, borders, and dropdown behavior.

```css
:root,
:host {
    --vs-colors--lightest: rgba(60, 60, 60, 0.26);
    --vs-colors--light: rgba(60, 60, 60, 0.5);
    --vs-colors--dark: #333;
    --vs-colors--darkest: rgba(0, 0, 0, 0.15);

    /* Search Input */
    --vs-search-input-color: inherit;
    --vs-search-input-bg: rgb(255, 255, 255);
    --vs-search-input-placeholder-color: inherit;

    /* Font */
    --vs-font-size: 1rem;
    --vs-line-height: 1.4;

    /* Disabled State */
    --vs-state-disabled-bg: rgb(248, 248, 248);
    --vs-state-disabled-color: var(--vs-colors--light);
    --vs-state-disabled-controls-color: var(--vs-colors--light);
    --vs-state-disabled-cursor: not-allowed;

    /* Borders */
    --vs-border-color: var(--vs-colors--lightest);
    --vs-border-width: 1px;
    --vs-border-style: solid;
    --vs-border-radius: 4px;

    /* Actions: house the component controls */
    --vs-actions-padding: 4px 6px 0 3px;

    /* Component Controls: Clear, Open Indicator */
    --vs-controls-color: var(--vs-colors--light);
    --vs-controls-size: 1;
    --vs-controls--deselect-text-shadow: 0 1px 0 #fff;

    /* Selected */
    --vs-selected-bg: #f0f0f0;
    --vs-selected-color: var(--vs-colors--dark);
    --vs-selected-border-color: var(--vs-border-color);
    --vs-selected-border-style: var(--vs-border-style);
    --vs-selected-border-width: var(--vs-border-width);

    /* Dropdown */
    --vs-dropdown-bg: #fff;
    --vs-dropdown-color: inherit;
    --vs-dropdown-z-index: 1000;
    --vs-dropdown-min-width: 160px;
    --vs-dropdown-max-height: 350px;
    --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);

    /* Options */
    --vs-dropdown-option-bg: #000;
    --vs-dropdown-option-color: var(--vs-dropdown-color);
    --vs-dropdown-option-padding: 3px 20px;

    /* Active State */
    --vs-dropdown-option--active-bg: #5897fb;
    --vs-dropdown-option--active-color: #fff;

    /* Deselect State */
    --vs-dropdown-option--deselect-bg: #fb5858;
    --vs-dropdown-option--deselect-color: #fff;

    /* Transitions */
    --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
    --vs-transition-duration: 150ms;
}
```

--------------------------------

### onTab

Source: https://vue-select.org/api/props.html

Select the current value if selectOnTab is enabled.

```APIDOC
## onTab

### Description
Select the current value if selectOnTab is enabled.

### Type
Function

### Default
function() { if (this.selectOnTab) { this.typeAheadSelect(); } }

### Example
```js
onTab: {
	type: Function,
	default: function() {
		if (this.selectOnTab) {
			this.typeAheadSelect();
		}
	}
}
```
```

--------------------------------

### search:focus

Source: https://vue-select.org/api/events.html

Triggered when the text input gains focus. The dropdown will open immediately before this event is triggered.

```APIDOC
## Event: search:focus

### Description
Triggered when the text input gains focus. The dropdown will open immediately before this event is triggered.

### Example
```
this.$emit("search:focus");
```
```

--------------------------------

### label

Source: https://vue-select.org/api/props.html

Tells vue-select what key to use when generating option labels when each option is an object.

```APIDOC
## label

### Description
Tells vue-select what key to use when generating option labels when each option is an object.

### Type
String

### Default
"label"

### Example
```js
label: {
	type: String,
	default: "label"
}
```
```

--------------------------------

### searchable

Source: https://vue-select.org/api/props.html

Enable/disable filtering the options.

```APIDOC
## searchable

### Description
Enable/disable filtering the options.

### Type
Boolean

### Default
true

### Example
```
searchable: {
	type: Boolean,
	default: true
},
```
```

--------------------------------

### selectOnTab prop definition

Source: https://vue-select.org/api/props.html

When true, hitting the 'tab' key will select the current select value. The prop is a Boolean with a default of false.

```javascript
selectOnTab: {
	type: Boolean,
	default: false
}

```

--------------------------------

### Importing separated CSS

Source: https://vue-select.org/guide/upgrading.html

In v3.x, CSS is no longer bundled with the JS and must be imported separately.

```javascript
@import vSelect from 'vue-select`;
@import 'vue-select/dist/vue-select.css';
```

--------------------------------

### createOption prop definition

Source: https://vue-select.org/api/props.html

Function prop for user-defined option creation. The default function handles object options by setting the label property, emits 'option:created', and returns the new option.

```javascript
createOption: {
  type: Function,
  default(newOption) {
    if (typeof this.optionList[0] === 'object') {
      newOption = {[this.label]: newOption}
    }

    this.$emit('option:created', newOption)
    return newOption
  }
},

```

--------------------------------

### Include vue-select CSS

Source: https://vue-select.org/guide/install.html

The component does not include CSS by default, so you must import the stylesheet separately.

```javascript
import 'vue-select/dist/vue-select.css';

```

--------------------------------

### Pass primitive options to v-select

Source: https://vue-select.org/guide/options.html

Use an array of strings or numbers for the options prop when simple values are needed.

```html
<!-- array of strings or numbers -->
<v-select :options="['Canada', 'United States']"></v-select>
```

--------------------------------

### Implement the header slot

Source: https://vue-select.org/api/slots.html

Use the header slot to add content at the top of the component, above the dropdown toggle.

```vue
<template>
  <v-select>
    <template #header>
      <div style="opacity: 0.8">Top of the component, in the header slot!</div>
    </template>
  </v-select>
</template>
```

--------------------------------

### option:created

Source: https://vue-select.org/api/events.html

Triggered when taggable is true and a new option has been created.

```APIDOC
## Event: option:created

### Description
Triggered when taggable is true and a new option has been created.

### Parameters
- **newOption** (Object) - created option

### Example
```
this.$emit("option:created", newOption);
```
```

--------------------------------

### Vue Select push-tags prop

Source: https://vue-select.org/guide/values.html

Enables pushing added tags directly into the options array.

```html
<v-select taggable multiple push-tags />
```

--------------------------------

### Infinite Scroll Implementation Component

Source: https://vue-select.org/guide/infinite-scroll.html

A complete Vue component demonstrating infinite scroll using IntersectionObserver to trigger pagination when the list footer becomes visible.

```vue
<template>
  <v-select
    :options="paginated"
    :filterable="false"
    @open="onOpen"
    @close="onClose"
    @search="(query) => (search = query)"
  >
    <template #list-footer>
      <li v-show="hasNextPage" ref="load" class="loader">
        Loading more options...
      </li>
    </template>
  </v-select>
</template>

<script>
import countries from '../data/countries'

export default {
  name: 'InfiniteScroll',
  data: () => ({
    observer: null,
    limit: 10,
    search: '',
  }),
  computed: {
    filtered() {
      return countries.filter((country) => country.includes(this.search))
    },
    paginated() {
      return this.filtered.slice(0, this.limit)
    },
    hasNextPage() {
      return this.paginated.length < this.filtered.length
    },
  },
  mounted() {
    /**
     * You could do this directly in data(), but since these docs
     * are server side rendered, IntersectionObserver doesn't exist
     * in that environment, so we need to do it in mounted() instead.
     */
    this.observer = new IntersectionObserver(this.infiniteScroll)
  },
  methods: {
    async onOpen() {
      if (this.hasNextPage) {
        await this.$nextTick()
        this.observer.observe(this.$refs.load)
      }
    },
    onClose() {
      this.observer.disconnect()
    },
    async infiniteScroll([{ isIntersecting, target }]) {
      if (isIntersecting) {
        const ul = target.offsetParent
        const scrollTop = target.offsetParent.scrollTop
        this.limit += 10
        await this.$nextTick()
        ul.scrollTop = scrollTop
      }
    },
  },
}
</script>

<style scoped>
.loader {
  text-align: center;
  color: #bbbbbb;
}
</style>
```

--------------------------------

### option:selected

Source: https://vue-select.org/api/events.html

Triggered when an option has been selected, after updating internal state. Available in v3.11.0+.

```APIDOC
## Event: option:selected

### Description
Triggered when an option has been selected, after updating internal state. Available in v3.11.0+.

### Parameters
- **selectedOption** (Object) - The selected option.

### Example
```
this.$emit("option:selected", selectedOption);
```
```

--------------------------------

### Configure Tagging Props

Source: https://vue-select.org/sandbox.html

Props used to control tagging behavior in the component.

```html
:taggable="false"
:no-drop="false"
:push-tags="false"
```

--------------------------------

### Emit open event

Source: https://vue-select.org/api/events.html

Triggered when the dropdown is opened.

```javascript
this.$emit("open");

```

--------------------------------

### options

Source: https://vue-select.org/api/props.html

An array of strings or objects to be used as dropdown choices. If using an array of objects, vue-select looks for a label key (ex. [{label: 'Canada', value: 'CA'}]). A custom label key can be set with the label prop.

```APIDOC
## options

### Description
An array of strings or objects to be used as dropdown choices. If using an array of objects, vue-select looks for a label key (ex. [{label: 'Canada', value: 'CA'}]). A custom label key can be set with the label prop.

### Type
Array

### Default
[]

### Example
```js
options: {
	type: Array,
	default() {
		return [];
	}
}
```
```

--------------------------------

### taggable prop definition

Source: https://vue-select.org/api/props.html

Enables or disables creating options from searchInput. Default is false.

```javascript
taggable: {
	type: Boolean,
	default: false
},

```

--------------------------------

### Pass object options to v-select

Source: https://vue-select.org/guide/options.html

Use an array of objects for the options prop to represent more complex data structures.

```html
<!-- or, an array of objects -->
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
```

--------------------------------

### Customize selectOnKeyCodes to tag on comma and return

Source: https://vue-select.org/guide/keydown.html

Sets the select-on-key-codes prop to an array of keyCodes that trigger a typeAheadSelect. Here, keyCodes 188 (comma) and 13 (return) are used to tag items in a taggable multiple select. Any keyCodes in this array prevent the default event action and trigger a typeahead select.

```html
<template>
  <!-- tag on 188/comma & 13/return -->
  <v-select no-drop taggable multiple :select-on-key-codes="[188, 13]" />
</template>
```

--------------------------------

### dropdownShouldOpen

Source: https://vue-select.org/api/props.html

Function prop that determines whether the dropdown should open. Used for overriding the default dropdown behaviour. Receives the vue-select instance as the single argument to the function.

```APIDOC
## dropdownShouldOpen

### Description
Determines whether the dropdown should open. Used for overriding the default dropdown behaviour. Receives the vue-select instance as the single argument to the function.

### Type
Function

### Default
```js
default({noDrop, open, mutableLoading}) {
  return noDrop ? false : open && !mutableLoading;
}
```

### Example
```js
dropdownShouldOpen: {
    type: Function,
    default({noDrop, open, mutableLoading}) {
      return noDrop ? false : open && !mutableLoading;
    }
}
```
```

--------------------------------

### Dispatching Vuex actions with v-select input event

Source: https://vue-select.org/guide/vuex.html

Use the input event to bind the component to Vuex state, allowing the component to dispatch actions or trigger mutations when the selection changes.

```html
<v-select 
    @input="myAction" 
    :options="$store.state.options"
    :value="$store.state.selected"
  ></v-select>
```

--------------------------------

### Implement the footer slot

Source: https://vue-select.org/api/slots.html

Use the footer slot to add content at the bottom of the component. It is recommended to use the append-to-body prop to ensure correct dropdown positioning.

```vue
<template>
  <v-select append-to-body>
    <template #footer>
      <div style="opacity: 0.8">
        Bottom of the component, in the footer slot!
      </div>
    </template>
  </v-select>
</template>
```

--------------------------------

### list-header slot

Source: https://vue-select.org/api/slots.html

Displays content as the first item in the dropdown. The slot receives scoped props including search, loading, searching, and filteredOptions. The parent element is the <ul>, so the slot content should contain a root <li>.

```APIDOC
## Slot: list-header

### Description
Displayed as the first item in the dropdown. No content by default. Parent element is the <ul>, so this slot should contain a root <li>.

### Scoped Props
- **search** (string) - The current search query
- **loading** (boolean) - Is the component loading
- **searching** (boolean) - Is the component searching
- **filteredOptions** (array) - Options filtered by the search text

### Usage Example
```vue
<template>
  <v-select>
    <template #list-header>
      <li style="text-align: center">Top of the list!</li>
    </template>
  </v-select>
</template>
```
```

--------------------------------

### Custom loading spinner slot

Source: https://vue-select.org/guide/ajax.html

Replaces the default spinner with custom content. The spinner slot is shown when the loading class is present.

```html
<div class="spinner" v-show="spinner">Loading...</div>
```

--------------------------------

### disabled

Source: https://vue-select.org/api/props.html

Boolean prop that disables the entire component. Defaults to false.

```APIDOC
## disabled

### Description
Disable the entire component.

### Type
Boolean

### Default
false

### Example
```js
disabled: {
	type: Boolean,
	default: false
}
```
```

--------------------------------

### noDrop

Source: https://vue-select.org/api/props.html

Disable the dropdown entirely.

```APIDOC
## noDrop

### Description
Disable the dropdown entirely.

### Type
Boolean

### Default
false

### Example
```js
noDrop: {
	type: Boolean,
	default: false
}
```
```

--------------------------------

### autocomplete prop definition

Source: https://vue-select.org/api/props.html

Binds the provided value to the autocomplete HTML attribute on the search input. Defaults to 'off'.

```javascript
autocomplete: {
    type: String,
    default: 'off'
},

```

--------------------------------

### Reduce to return a single key

Source: https://vue-select.org/guide/values.html

Use the reduce prop to transform the selected option before it is passed to the @input event. Here it returns the code property while displaying the country label.

```html
<v-select :options="options" :reduce="country => country.code" label="country" />
```

--------------------------------

### no-options slot

Source: https://vue-select.org/api/slots.html

Displays content when there are no options to show. The slot is displayed above list-footer when filteredOptions.length === 0. It receives scoped props including search, loading, and searching.

```APIDOC
## Slot: no-options

### Description
The no options slot is displayed above `list-footer` in the dropdown when `filteredOptions.length === 0`.

### Scoped Props
- **search** (string) - The current search query
- **loading** (boolean) - Is the component loading
- **searching** (boolean) - Is the component searching

### Usage Example
```vue
<template>
  <v-select>
    <!-- eslint-disable-next-line vue/no-unused-vars  -->
    <template #no-options="{ search, searching, loading }">
      This is the no options slot.
    </template>
  </v-select>
</template>
```
```

--------------------------------

### dropdownShouldOpen prop definition

Source: https://vue-select.org/api/props.html

Function prop. Determines whether the dropdown should open, overriding default behavior. Receives the vue-select instance as the single argument.

```javascript
dropdownShouldOpen: {
    type: Function,
    default({noDrop, open, mutableLoading}) {
      return noDrop ? false : open && !mutableLoading;
    }
}

```

--------------------------------

### label prop definition

Source: https://vue-select.org/api/props.html

Tells vue-select what key to use when generating option labels when each option is an object. Defaults to "label".

```javascript
label: {
	type: String,
	default: "label"
},

```

--------------------------------

### input

Source: https://vue-select.org/api/events.html

Triggered when the selected value changes. Used internally for v-model.

```APIDOC
## Event: input

### Description
Triggered when the selected value changes. Used internally for v-model.

### Parameters
- **val** (Object|String) - selected option.

### Example
```
this.$emit("input", val);
```
```

--------------------------------

### Open dropdown when search text is present using dropdownShouldOpen

Source: https://vue-select.org/guide/opening.html

Customizes the dropdown open/close behavior using the `dropdownShouldOpen` prop. The function receives the VueSelect component instance and returns a boolean: if a country is already selected, it returns `VueSelect.open`; otherwise, it opens only when search text is present and the dropdown is open. Requires the `countries` data file and the `v-model` binding.

```html
<template>
  <v-select
    v-model="country"
    :options="countries"
    :dropdown-should-open="dropdownShouldOpen"
  />
</template>

<script>
import countries from '../data/countries.js'

export default {
  data() {
    return {
      countries,
      country: null,
    }
  },
  methods: {
    dropdownShouldOpen(VueSelect) {
      if (this.country !== null) {
        return VueSelect.open
      }

      return VueSelect.search.length !== 0 && VueSelect.open
    },
  },
}
</script>
```
Tokens:
Raw