multiselect-dropdown

2.0.2 verified Fri May 01 auth: no javascript

A lightweight, dependency-free multi-select dropdown control that replaces a standard HTML select element with rich features like search/filter, checkboxes, limit display, and custom styling. Current stable version 2.0.2 is released irregularly with incremental fixes. Key differentiators: pure JavaScript/ES module with no dependencies, minified standalone script for direct browser use, and support for both ESM (ES6 class) and UMD/global patterns. Suitable for simple multi-select needs without heavy frameworks.

Common errors

error Uncaught SyntaxError: The requested module 'multiselect-dropdown' does not provide an export named 'MultiselectDropdown' ↓

cause Using named import ( { MultiselectDropdown } ) instead of default import.

fix

import MultiselectDropdown from 'multiselect-dropdown';

error Error: Cannot find module 'multiselect-dropdown' ↓

cause Package not installed or path incorrect.

fix

Run 'npm install multiselect-dropdown' or verify node_modules.

error TypeError: MultiselectDropdown is not a constructor ↓

cause Using require() in ESM environment or wrong import style.

fix

Use ES6 import: import MultiselectDropdown from 'multiselect-dropdown';

error ReferenceError: MultiselectDropdown is not defined ↓

cause Script tag not loaded or using global in module environment.

fix

Use <script src="path/to/multiselect.min.js"></script> before your script.

Warnings

breaking v2.0.0 switched to ES module (type: module). CommonJS require() will fail. ↓

fix Use import statement or switch to script tag with dist/multiselect.min.js.

breaking v2.0.0 class name changed from MultiselectDropdown to MultiselectDropdown (same) but now exported as default only. ↓

fix Use import MultiselectDropdown from 'multiselect-dropdown' instead of named import.

gotcha The package does not include TypeScript type definitions. ↓

fix Create a .d.ts file or use @ts-ignore. Consider contributing types to DefinitelyTyped.

gotcha Search functionality requires adding the 'search' option explicitly; it is not enabled by default. ↓

fix Set search: true in the options object.

deprecated The 'onItemSelect' event was removed in v2.0.0. Use 'onChange' instead. ↓

fix Replace onItemSelect with onChange callback.

Install

npm install multiselect-dropdown

yarn add multiselect-dropdown

pnpm add multiselect-dropdown

Imports

MultiselectDropdown
wrong
```
const MultiselectDropdown = require('multiselect-dropdown')
```
correct
```
import MultiselectDropdown from 'multiselect-dropdown'
```
Default import of ES6 class since v2.0.0. CJS require not supported (package is type: module).

MultiselectDropdown

wrong

<script src="multiselect-dropdown/index.js"></script>

correct

<script src="multiselect-dropdown/dist/multiselect.min.js"></script>

Then use global: new MultiselectDropdown(element, options)

For browser script tag, use dist/multiselect.min.js. The main entry is ESM and won't work directly.

MultiselectDropdown

wrong

import { MultiselectDropdown } from 'multiselect-dropdown'

correct

import MultiselectDropdown from 'multiselect-dropdown'

Named export is not available. Use default import.

Quickstart

Shows creating a multi-select dropdown from a <select> element with options like placeholder, limit, search, select-all, and change callback.

// Install: npm install multiselect-dropdown
import MultiselectDropdown from 'multiselect-dropdown';

// HTML: <select id="mySelect" multiple>
// <option value="1">Option 1</option>
// <option value="2">Option 2</option>
// <option value="3">Option 3</option>
// </select>

const element = document.getElementById('mySelect');
const dropdown = new MultiselectDropdown(element, {
  placeholder: 'Select options',
  maxItems: 5,
  search: true,
  selectAll: true,
  onChange: function(values) {
    console.log('Selected:', values);
  }
});
// To destroy: dropdown.destroy();