Vue Multiselect Dropdown

A highly customizable multiselect dropdown component built with Vue 3 and pure CSS.
This component supports single-select, multi-select, searchable options, and works seamlessly with dark mode.

✨ Features

• Single-select and multi-select modes
• Searchable input field for filtering options
• Customizable keys for labels and values
• Responsive and lightweight (no external UI libraries required)
• Tag-style selected items in multi-select mode
• Keyboard and mouse interactions
• Dark mode support
• Smooth transition animations

📦 Installation

Install the package from npm:

npm install vue-multiselect-dropdown

🛠 Usage

Register the Component

import { createApp } from "vue";
import App from "./App.vue";
import CustomDropdown from "vue-custom-dropdown";
import "vue-custom-dropdown/dist/style.css";

const app = createApp(App);
app.component("CustomDropdown", CustomDropdown);
app.mount("#app");

Basic Example

<template>
  <div>
    <CustomDropdown
      v-model="selectedOption"
      :options="dropdownOptions"
      placeholder="Select an option"
      label="Choose Option"
    />
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      dropdownOptions: [
        { name: "Option 1", value: 1 },
        { name: "Option 2", value: 2 },
        { name: "Option 3", value: 3 }
      ]
    };
  }
};
</script>

Multi-Select Example

<CustomDropdown
  v-model="selectedOptions"
  :options="dropdownOptions"
  placeholder="Select options"
  label="Choose Options"
  multiple
  searchable
  :required="true"
/>

data() {
  return {
    selectedOptions: [],
    dropdownOptions: [
      { name: "Option 1", value: 1 },
      { name: "Option 2", value: 2 },
      { name: "Option 3", value: 3 },
    ]
  };
}

Validation Example

If the dropdown is required, call the validate() method before submission:

<CustomDropdown
  ref="dropdown"
  v-model="selectedOption"
  :options="dropdownOptions"
  label="Choose Option"
  :required="true"
/>

<button @click="submitForm">Submit</button>


methods: {
  submitForm() {
    if (this.$refs.dropdown.validate()) {
      alert("Valid!");
    } else {
      alert("Please select an option.");
    }
  }
}

| Prop | Type | Default | Description | | ------------- | ---------------------------- | -------------------- | ----------------------------------------------------- | | modelValue | Array/Object/String/Number | [] | The selected value (or array of values for multiple). | | options | Array | [] | List of dropdown options. | | multiple | Boolean | false | Enable multiple selection. | | searchable | Boolean | false | Enable search input. | | placeholder | String | "Select an option" | Placeholder text. | | label | String | "" | Dropdown label. | | required | Boolean | false | Enable required validation. | | labelKey | String | "name" | Key used to display text. | | valueKey | String | "value" | Key used as value. | | highlight-search | Boolean | false | Enables highlighting of matched arch |