{"id":25968,"library":"multiselect-dropdown","title":"multiselect-dropdown","description":"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.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/israel-munoz/multiselect-dropdown","tags":["javascript","forms","select","multiselect"],"install":[{"cmd":"npm install multiselect-dropdown","lang":"bash","label":"npm"},{"cmd":"yarn add multiselect-dropdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add multiselect-dropdown","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default import of ES6 class since v2.0.0. CJS require not supported (package is type: module).","wrong":"const MultiselectDropdown = require('multiselect-dropdown')","symbol":"MultiselectDropdown","correct":"import MultiselectDropdown from 'multiselect-dropdown'"},{"note":"For browser script tag, use dist/multiselect.min.js. The main entry is ESM and won't work directly.","wrong":"<script src=\"multiselect-dropdown/index.js\"></script>","symbol":"MultiselectDropdown","correct":"<script src=\"multiselect-dropdown/dist/multiselect.min.js\"></script>\n\nThen use global: new MultiselectDropdown(element, options)"},{"note":"Named export is not available. Use default import.","wrong":"import { MultiselectDropdown } from 'multiselect-dropdown'","symbol":"MultiselectDropdown","correct":"import MultiselectDropdown from 'multiselect-dropdown'"}],"quickstart":{"code":"// Install: npm install multiselect-dropdown\nimport MultiselectDropdown from 'multiselect-dropdown';\n\n// HTML: <select id=\"mySelect\" multiple>\n// <option value=\"1\">Option 1</option>\n// <option value=\"2\">Option 2</option>\n// <option value=\"3\">Option 3</option>\n// </select>\n\nconst element = document.getElementById('mySelect');\nconst dropdown = new MultiselectDropdown(element, {\n  placeholder: 'Select options',\n  maxItems: 5,\n  search: true,\n  selectAll: true,\n  onChange: function(values) {\n    console.log('Selected:', values);\n  }\n});\n// To destroy: dropdown.destroy();\n","lang":"javascript","description":"Shows creating a multi-select dropdown from a <select> element with options like placeholder, limit, search, select-all, and change callback."},"warnings":[{"fix":"Use import statement or switch to script tag with dist/multiselect.min.js.","message":"v2.0.0 switched to ES module (type: module). CommonJS require() will fail.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use import MultiselectDropdown from 'multiselect-dropdown' instead of named import.","message":"v2.0.0 class name changed from MultiselectDropdown to MultiselectDropdown (same) but now exported as default only.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Create a .d.ts file or use @ts-ignore. Consider contributing types to DefinitelyTyped.","message":"The package does not include TypeScript type definitions.","severity":"gotcha","affected_versions":"<=2.0.2"},{"fix":"Set search: true in the options object.","message":"Search functionality requires adding the 'search' option explicitly; it is not enabled by default.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Replace onItemSelect with onChange callback.","message":"The 'onItemSelect' event was removed in v2.0.0. Use 'onChange' instead.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"import MultiselectDropdown from 'multiselect-dropdown';","cause":"Using named import ( { MultiselectDropdown } ) instead of default import.","error":"Uncaught SyntaxError: The requested module 'multiselect-dropdown' does not provide an export named 'MultiselectDropdown'"},{"fix":"Run 'npm install multiselect-dropdown' or verify node_modules.","cause":"Package not installed or path incorrect.","error":"Error: Cannot find module 'multiselect-dropdown'"},{"fix":"Use ES6 import: import MultiselectDropdown from 'multiselect-dropdown';","cause":"Using require() in ESM environment or wrong import style.","error":"TypeError: MultiselectDropdown is not a constructor"},{"fix":"Use <script src=\"path/to/multiselect.min.js\"></script> before your script.","cause":"Script tag not loaded or using global in module environment.","error":"ReferenceError: MultiselectDropdown is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}