### Install @vueform/multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

Installs the @vueform/multiselect package using npm. This is the initial step to integrate the component into your Vue.js project.

```bash
npm install @vueform/multiselect
```

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

### Vue 2 Multiselect Component Setup

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates how to set up and use the Multiselect component in a Vue 2 application. It includes importing the component, registering it, and providing sample data for model binding and options. Ensure you have the correct version of the Multiselect library installed for Vue 2.

```vue
<template>
  <div>
    <Multiselect
      v-model="value"
      :options="options"
    />
  </div>
</template>

<script>
  import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'

  export default {
    components: {
      Multiselect,
    },
    data() {
      return {
        value: null,
        options: [
          'Batman',
          'Robin',
          'Joker',
        ]
      }
    }
  }
</script>

<style src="@vueform/multiselect/themes/default.css"></style>
```

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

### Vue Multiselect: Create Option On Keypress Example

Source: https://github.com/vueform/multiselect/blob/main/README.md

Configures which keys trigger the creation of a new option when 'createOption' is enabled. This example shows creating options on 'enter' or 'space'.

```html
<multiselect 
  v-model="value"
  :options="options"
  :create-option="true"
  :add-option-on="['enter', 'space']">
</multiselect>
```

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

### Basic Vue 3 Usage with @vueform/multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates a basic setup for using the Multiselect component in a Vue 3 application. It includes importing the component, defining data properties for model and options, and applying default styling.

```vue
<template>
  <div>
    <Multiselect
      v-model="value"
      :options="options"
    />
  </div>
</template>

<script>
  import Multiselect from '@vueform/multiselect'

  export default {
    components: {
      Multiselect,
    },
    data() {
      return {
        value: null,
        options: [
          'Batman',
          'Robin',
          'Joker',
        ]
      }
    }
  }
</script>

<style src="@vueform/multiselect/themes/default.css"></style>
```

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

### Load Async Options from API on Open with Infinite Scroll in Vue Multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

This example demonstrates loading options from an API asynchronously when the dropdown is first opened in Vue Multiselect. It utilizes `infinite: true` for virtualizing the option list, enabling efficient handling of large datasets. Options are not loaded until the user interacts with the dropdown, improving initial load performance.

```vue
<Multiselect
  v-model="value"
  mode="tags"
  placeholder="Choose your stack"
  :close-on-select="false"
  :filter-results="false"
  :min-chars="0"
  :resolve-on-load="false"
  :infinite="true"
  :limit="10"
  :clear-on-search="true"
  :delay="0"
  :searchable="true"
  :options="async (query) => {
    return await fetchLanguages(query)
  }"
  @open="(select$) => {
    if (select$.noOptions) {
      select$.resolveOptions()
    }
  }
/>
```

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

### Accessing Multiselect Component Instance via Ref

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates how to get a reference to the Vue Multiselect component instance using 'ref' in a template. This reference is crucial for calling its API methods.

```html
<Multiselect
  v-model="value"
  :options="options"
  ref="multiselect"
/>
```

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

### Vue Multiselect: Object Value Storage Example

Source: https://github.com/vueform/multiselect/blob/main/README.md

Illustrates how to store selected values as objects instead of simple strings. When 'object' is true, 'v-model' will hold objects with 'value' and 'label' properties.

```html
<multiselect 
  v-model="value"
  :options="options"
  :object="true">
</multiselect>
```

```javascript
data: {
  value: [{value: 'js', label: 'Javascript'}],
  options: [
    {value: 'js', label: 'Javascript'},
    {value: 'jsx', label: 'JSX'},
    {value: 'ts', label: 'Typescript'}
  ]
}
```

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

### Vue Multiselect Tags with Custom Tag Slot and Styling

Source: https://github.com/vueform/multiselect/blob/main/README.md

Shows how to use Vue-Multiselect in 'tags' mode for tag-based input, featuring a custom slot for rendering each tag. This example includes user images within the tags and custom CSS for styling the tags, demonstrating advanced UI customization. Dependencies include the Multiselect component and associated Vue template/script structure.

```vue
<template>
  <Multiselect
    v-model="value"
    mode="tags"
    placeholder="Select employees"
    track-by="name"
    label="name"
    :close-on-select="false"
    :searchable="true"
    :options="[
      { value: 'judy', name: 'Judy', image: 'https://randomuser.me/api/portraits/med/women/1.jpg' },
      { value: 'jane', name: 'Jane', image: 'https://randomuser.me/api/portraits/med/women/2.jpg' },
      { value: 'john', name: 'John', image: 'https://randomuser.me/api/portraits/med/men/1.jpg' },
      { value: 'joe', name: 'Joe', image: 'https://randomuser.me/api/portraits/med/men/2.jpg' }
    ]">
      <template v-slot:tag="{ option, handleTagRemove, disabled }">
        <div
          class="multiselect-tag is-user"
          :class="{
            'is-disabled': disabled
          }">
          <img :src="option.image">
          {{ option.name }}
          <span
            v-if="!disabled"
            class="multiselect-tag-remove"
            @click="handleTagRemove(option, $event)">
            <span class="multiselect-tag-remove-icon"></span>
          </span>
        </div>
      </template>
  </Multiselect>
</template>

<style>
  .multiselect-tag.is-user {
    padding: 5px 8px;
    border-radius: 22px;
    background: #35495e;
    margin: 3px 3px 8px;
  }

  .multiselect-tag.is-user img {
    width: 18px;
    border-radius: 50%;
    height: 18px;
    margin-right: 8px;
    border: 2px solid #ffffffbf;
  }

  .multiselect-tag.is-user i:before {
    color: #ffffff;
    border-radius: 50%;;
  }

  .user-image {
    margin: 0 6px 0 0;
    border-radius: 50%;
    height: 22px;
  }
</style>
```

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

### Manage Created Tags Asynchronously in Vue Multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

This example shows how to manage tag creation asynchronously in Vue Multiselect. It uses the `onCreate` callback to validate or modify newly created tags. The `regex` prop can restrict tag input, and the `onCreate` method can return `false` to prevent a tag from being added, or modify the tag's properties before it's accepted.

```vue
<template>
  <Multiselect
    mode="tags"
    v-model="value"
    placeholder="Accepts numbers <= 67 (delay: 1000ms)"
    :options="[]"
    :create-option="true"
    :searchable="true"
    :regex="/d/"
    :on-create="handleTagCreate"
  />
</template>
<script>
export default {
  methods: {
    handleTagCreate: async (option, select$) => {
      // Do not allow create tags above 67
      if (parseInt(option.value) > 67) {
        alert(`${option.value} is not allowed. Option must by <= 67.`)

        // If returns `false` the tag will not be added
        return false
      }

      // Async request (eg. for validating)
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })

      // Modifying option label
      option.label = option.label + ' - confirmed'

      return option
    }
  }
}
</script>
```

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

### Vue Multiselect: Append New Option Example

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates how to automatically append a new option to the list when 'searchable' and 'createTag' (or 'createOption') are enabled. If 'appendNewOption' is false, manual appending via the '@option' event is required.

```html
<multiselect 
  v-model="value"
  :options="options"
  :create-tag="true"
  :append-new-option="true"
  :searchable="true">
</multiselect>
```

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

### Vue Multiselect with Localized Texts

Source: https://github.com/vueform/multiselect/blob/main/README.md

This example showcases how to implement localized texts within the Vue Multiselect component. It uses the `locale` and `fallback-locale` props to specify the desired language. Options can have labels defined for different locales, allowing the component to display the appropriate text based on the user's language settings.

```vue
<template>
  <Multiselect
    v-model="value"
    locale="de"
    fallback-locale="en"
    :options="[
      { value: 1, label: { en: 'One', de: 'Eins' } },
      { value: 2, label: { en: 'Two' } },
      { value: 3, label: { es: 'Tres' } },
      { value: 4, label: 'Four' },
    ]"
  />
</template>
<script>
export default {
  data: () => ({
    value: [1]
  })
}
</script>
```

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

### Styling Multiselect Instance with CSS Classes

Source: https://github.com/vueform/multiselect/blob/main/README.md

This example shows how to apply custom styles to individual instances of the Vueform Multiselect component using CSS classes. By defining specific CSS variables within a class, you can target and modify the appearance of a particular multiselect instance without affecting others. This allows for granular control over styling elements like tags.

```vue
<Multiselect
  v-model="value"
  :options="options"
  class="multiselect-green"
/>

<Multiselect
  v-model="value"
  :options="options"
  class="multiselect-blue"
/>
```

```css
.multiselect-green {
  --ms-tag-bg: #D1FAE5;
  --ms-tag-color: #059669;
}

.multiselect-blue {
  --ms-tag-bg: #DBEAFE;
  --ms-tag-color: #2563EB;
}
```

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

### Set Default Values with `allowAbsent: true` in Vue Multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

This example demonstrates using `allowAbsent: true` in Vue Multiselect when the options list is an array of strings. This prop permits values that are not explicitly listed in the options. It's useful because plain string values for options automatically use the string itself as both the label and the value.

```vue
<template>
  <Multiselect
    mode="tags"
    v-model="value"
    placeholder="Select options"
    :allow-absent="true"
    :close-on-select="false"
    :searchable="true"
    :resolve-on-load="false"
    :delay="0"
    :min-chars="1"
    :options="async (query) => {
      return await fetchLanguages(query)
    }"
  />
</template>
<script>
export default {
  data: () => ({
    value: [
      'Java',
      'JavaScript',
    ]
  })
}
</script>
```

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

### Configuring Tailwind CSS for Multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

This JavaScript snippet shows how to configure `tailwind.config.js` to use custom background images for the Vueform Multiselect component, leveraging Tailwind CSS. It requires the `mini-svg-data-uri` package to convert SVG icons into data URIs for use as background images. This setup allows for styling elements like the caret, spinner, and remove icon using Tailwind's utility classes.

```js
// tailwind.config.js

const svgToDataUri = require('mini-svg-data-uri')

module.exports = {
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'multiselect-caret': `url("${svgToDataUri(
          `<svg viewBox=\"0 0 320 512\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\"></path></svg>`,
        )}")`,
        'multiselect-spinner': `url("${svgToDataUri(
          `<svg viewBox=\"0 0 512 512\" fill=\"${theme('colors.green.500')}\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z\"></path></svg>`,
        )}")`,
        'multiselect-remove': `url("${svgToDataUri(
          `<svg viewBox=\"0 0 320 512\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z\"></path></svg>`,
        )}")`,
      })
    },
  }
}
```

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

### Opening Multiselect Options List Programmatically

Source: https://github.com/vueform/multiselect/blob/main/README.md

Shows how to use the 'open' API method on the Multiselect component instance obtained via ref. This is typically done within lifecycle hooks like 'mounted'.

```js
mounted() {
  this.$refs.multiselect.open()
}
```

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

### Setting Multiselect Mode and Searchability

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates how to configure the selection mode (single, multiple, tags) and enable or disable the search functionality for options.

```vue
<multiselect
  v-model="value"
  :options="options"
  mode="multiple"
  :searchable="true"
  placeholder="Select options"
></multiselect>
```

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

### API Methods

Source: https://github.com/vueform/multiselect/blob/main/README.md

Programmatic methods to interact with the Multiselect component instance.

```APIDOC
## API Methods

To access the API, use a `ref` on the `Multiselect` component in your template:

```html
<Multiselect
  v-model="value"
  :options="options"
  ref="multiselect"
/>
```

Then, you can call these methods from your script:

```javascript
// Example: Opening the options list
mounted() {
  this.$refs.multiselect.open();
}
```

### Methods

- **open()**: Opens the options list.
- **close()**: Closes the options list.
- **select(option)**: Selects an option based on its value. `option` is the value of the option to select.
- **deselect(option)**: Deselects an option based on its value. `option` is the value of the option to deselect.
- **remove(option)**: Alias for `deselect(option)`.
- **selectAll()**: Selects all options. Only applicable if `mode` is set to `tags` or `multiple`.
- **clear()**: Deselects all selected options.
- **clearSearch()**: Clears the current search query.
- **refreshOptions(callback)**: Refreshes the async options list. `callback` is an optional function to be called after refresh.
- **setPointer(option)**: Points an option based on its value. `option` is the value of the option to point.
- **focus()**: Programmatically opens and focuses the multiselect element.
```

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

### Vue Multiselect: Initial Async Option Loading

Source: https://github.com/vueform/multiselect/blob/main/README.md

Determines whether async options should be loaded when the component initializes. Set to true if you need to load initial values that require fetching corresponding objects from the async source.

```html
<multiselect 
  v-model="value"
  :options="asyncOptions"
  :resolve-on-load="true">
</multiselect>
```

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

### Configuring Multiselect Options

Source: https://github.com/vueform/multiselect/blob/main/README.md

Defines how to provide options to the multiselect component. Options can be a simple array, an object, an array of objects with custom value, label, and disabled properties, or an asynchronous function returning options.

```vue
<multiselect
  v-model="value"
  :options="options"
  :value-prop="'id'"
  :label="'name'"
  :track-by="'name'"
></multiselect>
```

```javascript
export default {
  data() {
    return {
      value: null,
      options: [
        { id: 1, name: 'Vue.js' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    }
  }
}
```

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

### Multiselect with Groups in Vue

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates grouping options in a multiselect component. The `groups` prop is set to true, and options are structured as an array of objects, each containing a `label` and an `options` array.

```vue
<Multiselect
  v-model="value"
  mode="multiple"
  :close-on-select="false"
  :groups="true"
  :options="[
    {
      label: 'DC',
      options: ['Batman', 'Robin', 'Joker'],
    },
    {
      label: 'Marvel',
      options: ['Spiderman', 'Iron Man', 'Captain America'],
    },
  ]"
/>
```

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

### Vue Multiselect Async Options with Default Values

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates asynchronous loading of options in Vue-Multiselect using `resolveOnLoad: false` and `object: true`. This allows setting default values as objects with `label` and `value` properties, which is necessary when options are not resolved on mount. It requires a `fetchLanguages` function and Vue's data management.

```vue
<template>
  <Multiselect
    mode="tags"
    v-model="value"
    placeholder="Select options"
    :close-on-select="false"
    :searchable="true"
    :object="true"
    :resolve-on-load="false"
    :delay="0"
    :min-chars="1"
    :options="async (query) => {
      return await fetchLanguages(query)
    }"
  />
</template>
<script>
export default {
  data: () => ({
    value: [
      { value: 'Java', label: 'Java' },
      { value: 'JavaScript', label: 'JavaScript' },
    ]
  })
}
</script>
```

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

### Tags with Search and Create Option in Vue

Source: https://github.com/vueform/multiselect/blob/main/README.md

Implements a tag input field using Vue-Multiselect, allowing users to search through options, create new tags, and select multiple items. Options are provided as an array of objects.

```vue
<Multiselect
  v-model="value"
  mode="tags"
  :close-on-select="false"
  :searchable="true"
  :create-option="true"
  :options="[
    { value: 'batman', label: 'Batman' },
    { value: 'robin', label: 'Robin' },
    { value: 'joker', label: 'Joker' },
  ]"
/>
```

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

### Tags with Async Options in Vue

Source: https://github.com/vueform/multiselect/blob/main/README.md

Sets up a tag input that loads options asynchronously. Similar to autocomplete with async options, it uses properties like `filter-results: false`, `min-chars: 1`, and `resolve-on-load: false` to trigger asynchronous fetching. The `options` prop takes an async function.

```vue
<Multiselect
  v-model="value"
  mode="tags"
  placeholder="Choose your stack"
  :close-on-select="false"
  :filter-results="false"
  :min-chars="1"
  :resolve-on-load="false"
  :delay="0"
  :searchable="true"
  :options="async function(query, select$) {
    return await fetchLanguages(query) // check JS block in JSFiddle for implementation
  }"
/>
```

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

### Grouping Options in Multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

Illustrates how to group options within the multiselect component. This involves setting the `groups` prop to true and defining `groupLabel` and `groupOptions` properties to structure the grouped data.

```vue
<multiselect
  v-model="value"
  :options="groupedOptions"
  :groups="true"
  group-label="groupName"
  group-options="items"
></multiselect>
```

```javascript
export default {
  data() {
    return {
      value: null,
      groupedOptions: [
        {
          groupName: 'Web Frameworks',
          items: [
            { id: 1, name: 'Vue.js' },
            { id: 2, name: 'React' }
          ]
        },
        {
          groupName: 'JavaScript Libraries',
          items: [
            { id: 3, name: 'jQuery' },
            { id: 4, name: 'Lodash' }
          ]
        }
      ]
    }
  }
}
```

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

### Autocomplete with Async Options in Vue

Source: https://github.com/vueform/multiselect/blob/main/README.md

Configures an autocomplete input that fetches options asynchronously based on user input. It uses `filter-results: false`, `min-chars: 1`, `resolve-on-load: false`, and `delay: 0` for immediate fetching. The `options` prop accepts an async function.

```vue
<Multiselect
  v-model="value"
  placeholder="Choose a programming language"
  :filter-results="false"
  :min-chars="1"
  :resolve-on-load="false"
  :delay="0"
  :searchable="true"
  :options="async function(query) {
    return await fetchLanguages(query) // check JS block in JSFiddle for implementation
  }"
/>
```

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

### Controlling Multiselect Behavior with Props

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates the use of various props to control the behavior of the multiselect, such as `disabled`, `required`, `max` selections, and `infinite` scrolling for large option lists.

```vue
<multiselect
  v-model="value"
  :options="options"
  :max="5"
  :required="true"
  :disabled="isFormDisabled"
  :infinite="true"
  limit="20"
></multiselect>
```

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

### Single Select with Vue

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates a basic single select implementation using Vue-Multiselect with an array of string options. The selected value is bound to the 'value' model.

```vue
<Multiselect
  v-model="value"
  :options="['Batman', 'Robin', 'Joker']"
/>
```

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

### Slots

Source: https://github.com/vueform/multiselect/blob/main/README.md

Customizable template sections for rendering different parts of the Multiselect component.

```APIDOC
## Slots

| Slot Name      | Attributes                                       | Description                                                                                                                                  |
|----------------|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------|
| `placeholder`  |                                                  | Rendered as placeholder when the multiselect has no value and the `placeholder` prop is defined.                                             |
| `afterlist`    |                                                  | Rendered after the options list.                                                                                                             |
| `beforelist`   |                                                  | Rendered before the options list.                                                                                                            |
| `multiplelabel`| `values`                                         | Rendered when using `multiple` mode and options are selected. By default, it renders the return value of the `multipleLabel` function.      |
| `nooptions`    |                                                  | Rendered when the options list is empty. By default, it renders `noOptionsText`.                                                             |
| `noresults`    |                                                  | Rendered when there are no search results. By default, it renders `noResultsText`.                                                           |
| `grouplabel`   | `group`, `isPointed`, `isSelected`               | Renders a group label for options. `isPointed(option)` and `isSelected(option)` are functions to check the state of an option.              |
| `option`       | `option`, `isPointed`, `isSelected`, `search`    | Renders an option in the options list. `isPointed(option)` and `isSelected(option)` are functions to check the state of an option.      |
| `singlelabel`  | `value`                                          | Rendered when using `single` mode and an option is selected. By default, it renders the `:label` of the selected option.                 |
| `tag`          | `option`, `handleTagRemove`, `disabled`          | Renders a tag when using `tags` mode. If `disabled`, the remove icon should not be displayed. `handleTagRemove` should be used to trigger removal. |
| `caret`        | `handleCaretClick`, `isOpen`                     | Renders a small triangle on the right side of the multiselect. Set `pointer-events: false` to `handleCaretClick` when `isOpen: false` for original behavior. |
| `clear`        | `clear`                                          | Renders a remove icon if the multiselect has a value. The `clear` method should be used on the `mousedown` event.                          |
| `spinner`      |                                                  | Renders a loader icon when async options are being fetched.                                                                                    |
| `infinite`     |                                                  | Renders a loader icon when infinite scroll is in progress.                                                                                     |

> Note: Property names are normalized back to lowercase when used in the DOM due to Vue's handling.
```

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

### Focusing the Multiselect Input Element Programmatically

Source: https://github.com/vueform/multiselect/blob/main/README.md

Illustrates how to focus the underlying input element of the Multiselect component. This is achieved by accessing the component's root element via '$el' and calling its 'focus()' method.

```js
mounted() {
  this.$refs.multiselect.$el.focus()
}
```

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

### Customizing Multiselect Labels

Source: https://github.com/vueform/multiselect/blob/main/README.md

Shows how to customize the display of selected options using the `multipleLabel` prop for multiple selection modes. This allows for dynamic text based on the number of selected items.

```vue
<multiselect
  v-model="value"
  :options="options"
  mode="multiple"
  :multiple-label="customMultipleLabel"
></multiselect>
```

```javascript
export default {
  data() {
    return {
      value: [],
      options: ['Option 1', 'Option 2', 'Option 3']
    }
  },
  methods: {
    customMultipleLabel(current, select$) {
      return `${current.length} items selected`;
    }
  }
}
```

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

### Importing Tailwind CSS for Multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

This Vue template and style block shows how to import the Tailwind CSS theme for Vueform Multiselect into your main application component. By importing the `tailwind.css` file, you enable the styling customizations defined in your `tailwind.config.js` for the multiselect component. This is typically done in the `<style>` section of your root Vue component.

```vue
<template>
  <div id="app">
    <Multiselect ... />
  </div>
</template>

<script>
  // ...
</script>

<style>
  @import '@vueform/multiselect/themes/tailwind.css';
  /* or */
  /* @import './path/to/node_modules/@vueform/multiselect/themes/tailwind.css'; */
</style>
```

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

### Vue Multiselect with Custom Options and Single Label Slot

Source: https://github.com/vueform/multiselect/blob/main/README.md

Demonstrates how to use custom slots to render options and a single selected label in Vue-Multiselect. This allows for rich visual representation of choices, including images alongside text. It requires the Multiselect component and its associated data.

```vue
<Multiselect
  v-model="value"
  placeholder="Select your character"
  label="name"
  :options="[
    { value: 'captainamerica', name: 'Captain America', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/03_-_Captain_America_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
    { value: 'spiderman', name: 'Spiderman', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/12_-_Spiderman_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
    { value: 'ironman', name: 'Iron Man', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/02_-_IRONMAN_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
  ]">
  <template v-slot:singlelabel="{ value }">
    <div class="multiselect-single-label">
      <img class="character-label-icon" :src="value.icon"> {{ value.name }}
    </div>
  </template>

  <template v-slot:option="{ option }">
    <img class="character-option-icon" :src="option.icon"> {{ option.name }}
  </template>
</Multiselect>
```

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

### Vue Multiselect: Custom Option Creation Transform

Source: https://github.com/vueform/multiselect/blob/main/README.md

Shows how to transform a created option before it's added to the list using the 'onCreate' prop. This allows modifying the option's value and label, or preventing its addition by returning false.

```javascript
methods: {
  customOptionTransformer(newOption, selectInstance) {
    // Example: transform to { id: newOption.value, text: newOption.label }
    return { id: newOption.value, text: newOption.label };
  }
}
```

```html
<multiselect 
  v-model="value"
  :options="options"
  :create-option="true"
  :on-create="customOptionTransformer">
</multiselect>
```

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

### Multiselect with Object Options in Vue

Source: https://github.com/vueform/multiselect/blob/main/README.md

Shows a multiselect component where options are provided as an object (key-value pairs). The `mode` is set to 'multiple' and `close-on-select` is false to allow multiple selections without closing the dropdown.

```vue
<Multiselect
  v-model="value"
  mode="multiple"
  :close-on-select="false"
  :options="{
    batman: 'Batman',
    robin: 'Robin',
    joker: 'Joker'
  }"
/>
```

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

### Vue Multiselect: Async Option Loading Delay

Source: https://github.com/vueform/multiselect/blob/main/README.md

Configures the delay in milliseconds before refreshing the async option list after the user stops typing. A delay of -1 prevents refresh on query change, and 0 means no delay.

```html
<multiselect 
  v-model="value"
  :options="asyncOptions"
  :delay="500">
</multiselect>
```

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

### Styling Multiselect with CSS Variables

Source: https://github.com/vueform/multiselect/blob/main/README.md

This snippet demonstrates how to customize the Vueform Multiselect component by overriding default CSS variables. These variables control various aspects of the component's appearance, such as font size, colors, borders, and spacing. Customizations can be applied globally using the :root selector or on a per-instance basis by applying classes to the Multiselect component.

```css
:root {
  --ms-tag-bg: #059669;
  --ms-tag-color: #D1FAE5;
  --ms-tag-radius: 9999px;
  --ms-tag-font-weight: 400;
}
```

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

### Advanced Positioning with appendToBody

Source: https://github.com/vueform/multiselect/blob/main/README.md

Explains the experimental `appendToBody` and `appendTo` props for Vue 3, which allow the dropdown list to be appended to the document body or a specific DOM element for better positioning and to avoid overflow issues.

```vue
<multiselect
  v-model="value"
  :options="options"
  :append-to-body="true"
></multiselect>
```

```vue
<multiselect
  v-model="value"
  :options="options"
  append-to=".custom-container"
></multiselect>
```

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

### Events

Source: https://github.com/vueform/multiselect/blob/main/README.md

Events emitted by the Multiselect component in response to user interactions or state changes.

```APIDOC
## Events

The `select$` parameter in each event is the Multiselect component's instance.

| Event Name      | Attributes               | Description                                                                  |
|-----------------|--------------------------|------------------------------------------------------------------------------|
| `@change`       | `value`, `select$`       | Emitted after the value is changed.                                          |
| `@select`       | `value`, `option`, `select$` | Emitted after an option or tag is selected.                                  |
| `@deselect`     | `value`, `option`, `select$` | Emitted after an option is deselected or a tag is removed.                   |
| `@open`         | `select$`                | Emitted after the option list is opened.                                     |
| `@close`        | `select$`                | Emitted after the option list is closed.                                     |
| `@search-change`| `query`, `select$`       | Emitted after a character is typed into the search field.                    |
| `@tag`          | `query`, `select$`       | **Deprecated 2.3.0: use `@create` instead**. Emitted after Enter is pressed when creating a new tag. |
| `@option`       | `query`, `select$`       | **Deprecated 2.6.0: use `@create` instead**. Emitted after Enter is pressed when creating a new option. |
| `@create`       | `query`, `select$`       | Emitted after Enter is pressed when creating a new option.                   |
| `@clear`        | `select$`                | Emitted when the options are cleared.                                        |
| `@paste`        | `Event`, `select$`       | Emitted when the value is pasted into the search field.                      |
| `@keydown`      | `Event`, `select$`       | Emitted on `keydown`.                                                        |
| `@keyup`        | `Event`, `select$`       | Emitted on `keyup`.                                                          |
| `@max`          | `select$`                | Emitted when the `max` limit is reached in `multiple` or `tags` mode.        |
```

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

### Vue Multiselect Custom Styling with :classes Prop

Source: https://github.com/vueform/multiselect/blob/main/README.md

Defines custom Tailwind CSS classes for the Vue Multiselect component. This allows for granular control over styling without needing to import the default stylesheet. The prop accepts an object where keys represent component elements and values are corresponding class strings.

```vue
<Multiselect ... :classes="{
  container: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none',
  containerDisabled: 'cursor-default bg-gray-100',
  containerOpen: 'rounded-b-none',
  containerOpenTop: 'rounded-t-none',
  containerActive: 'ring ring-green-500 ring-opacity-30',
  wrapper: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
  singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
  singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
  multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
  search: 'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
  tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
  tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
  tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
  tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
  tagWrapperBreak: 'whitespace-normal break-all',
  tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
  tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
  tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
  tagsSearch: 'absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
  tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
  placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
  caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
  caretOpen: 'rotate-180 pointer-events-auto',
  clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
  clearIcon: 'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
  spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
  infinite: 'flex items-center justify-center w-full',
  infiniteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
  dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
  dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
  dropdownHidden: 'hidden',
  options: 'flex flex-col p-0 m-0 list-none',
  optionsTop: '',
  group: 'p-0 m-0',
  groupLabel: 'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
  groupLabelPointable: 'cursor-pointer',
  groupLabelPointed: 'bg-gray-300 text-gray-700',
  groupLabelSelected: 'bg-green-600 text-white',
  groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
  groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
  groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
  groupOptions: 'p-0 m-0',
  option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
  optionPointed: 'text-gray-800 bg-gray-100',
  optionSelected: 'text-white bg-green-500',
  optionDisabled: 'text-gray-300 cursor-not-allowed',
  optionSelectedPointed: 'text-white bg-green-500 opacity-90',
  optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
  noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
  noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
  fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent'
}
```

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

### Default Classes for Vueform Multiselect

Source: https://github.com/vueform/multiselect/blob/main/README.md

This snippet shows the default object structure for customizing CSS classes in Vueform Multiselect. It provides a comprehensive list of class names for various UI elements and states, allowing for extensive theming. Users can override these defaults by providing their own class object.

```javascript
{
  container: 'multiselect',
  containerDisabled: 'is-disabled',
  containerOpen: 'is-open',
  containerOpenTop: 'is-open-top',
  containerActive: 'is-active',
  wrapper: 'multiselect-wrapper',
  singleLabel: 'multiselect-single-label',
  singleLabelText: 'multiselect-single-label-text',
  multipleLabel: 'multiselect-multiple-label',
  search: 'multiselect-search',
  tags: 'multiselect-tags',
  tag: 'multiselect-tag',
  tagDisabled: 'is-disabled',
  tagWrapper: 'multiselect-tag-wrapper',
  tagWrapperBreak: 'multiselect-tag-wrapper-break',
  tagRemove: 'multiselect-tag-remove',
  tagRemoveIcon: 'multiselect-tag-remove-icon',
  tagsSearchWrapper: 'multiselect-tags-search-wrapper',
  tagsSearch: 'multiselect-tags-search',
  tagsSearchCopy: 'multiselect-tags-search-copy',
  placeholder: 'multiselect-placeholder',
  caret: 'multiselect-caret',
  caretOpen: 'is-open',
  clear: 'multiselect-clear',
  clearIcon: 'multiselect-clear-icon',
  spinner: 'multiselect-spinner',
  infinite: 'multiselect-infinite',
  infiniteSpinner: 'multiselect-infinite-spinner',
  dropdown: 'multiselect-dropdown',
  dropdownTop: 'is-top',
  dropdownHidden: 'is-hidden',
  options: 'multiselect-options',
  optionsTop: 'is-top',
  group: 'multiselect-group',
  groupLabel: 'multiselect-group-label',
  groupLabelPointable: 'is-pointable',
  groupLabelPointed: 'is-pointed',
  groupLabelSelected: 'is-selected',
  groupLabelDisabled: 'is-disabled',
  groupLabelSelectedPointed: 'is-selected is-pointed',
  groupLabelSelectedDisabled: 'is-selected is-disabled',
  groupOptions: 'multiselect-group-options',
  option: 'multiselect-option',
  optionPointed: 'is-pointed',
  optionSelected: 'is-selected',
  optionDisabled: 'is-disabled',
  optionSelectedPointed: 'is-selected is-pointed',
  optionSelectedDisabled: 'is-selected is-disabled',
  noOptions: 'multiselect-no-options',
  noResults: 'multiselect-no-results',
  fakeInput: 'multiselect-fake-input',
  assist: 'multiselect-assistive-text',
  spacer: 'multiselect-spacer'
}
```