{"_id":"multi-select-dropdown-js","name":"multi-select-dropdown-js","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"multi-select-dropdown-js","version":"1.0.3","description":"A lightweight, dependency-free Multi Select Dropdown in Vanilla JavaScript.","main":"MultiSelect.js","unpkg":"MultiSelect.min.js","jsdelivr":"MultiSelect.min.js","style":"MultiSelect.min.css","repository":{"type":"git","url":"git+https://github.com/codeshackio/multi-select-dropdown-js.git"},"keywords":["select","multi-select","dropdown","vanilla-js","no-jquery","optgroup","form-validation"],"author":{"name":"David Adams","email":"info@codeshack.io","url":"https://codeshack.io"},"license":"MIT","bugs":{"url":"https://github.com/codeshackio/multi-select-dropdown-js/issues"},"homepage":"https://codeshack.io/multi-select-dropdown-html-javascript/","_id":"multi-select-dropdown-js@1.0.3","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-9eX3CAtjzSwvFiwmay6+xCbnmCGlG+F/HbhvFyu5LTXc1sMWpbRqPhjzd6XUsTefn+iMFfrgS5I6MdFwfxQtIQ==","shasum":"8b40ef11b24a311fe1e188cbf3fa57af785eee4c","tarball":"https://registry.npmjs.org/multi-select-dropdown-js/-/multi-select-dropdown-js-1.0.3.tgz","fileCount":7,"unpackedSize":80052,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFBymbnJa9QBeDH3vYgwW7999nrdvGYWOtyZAbh98uAXAiBmWa3ZQh8Rs0Jre+SOVjtV+OI/f6r8Ggfz8B58Ba416g=="}]},"_npmUser":{"name":"codeshackio","email":"info@codeshack.io"},"directories":{},"maintainers":[{"name":"codeshackio","email":"info@codeshack.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/multi-select-dropdown-js_1.0.3_1774632048375_0.2594754834401978"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-27T17:20:48.374Z","1.0.3":"2026-03-27T17:20:48.525Z","modified":"2026-03-27T17:20:48.743Z"},"maintainers":[{"name":"codeshackio","email":"info@codeshack.io"}],"description":"A lightweight, dependency-free Multi Select Dropdown in Vanilla JavaScript.","homepage":"https://codeshack.io/multi-select-dropdown-html-javascript/","keywords":["select","multi-select","dropdown","vanilla-js","no-jquery","optgroup","form-validation"],"repository":{"type":"git","url":"git+https://github.com/codeshackio/multi-select-dropdown-js.git"},"author":{"name":"David Adams","email":"info@codeshack.io","url":"https://codeshack.io"},"bugs":{"url":"https://github.com/codeshackio/multi-select-dropdown-js/issues"},"license":"MIT","readme":"# Multi Select Dropdown JS\n\nCreate powerful user interfaces with our **Multi Select Dropdown**! This tool enhances native select elements, allowing for multiple selections, dynamic content generation, integrated search functionality, and customizable UI without any dependencies. No jQuery or other library is required!\n\nThe complete guide and reference is available here: [https://codeshack.io/multi-select-dropdown-html-javascript/](https://codeshack.io/multi-select-dropdown-html-javascript/)\n\nDemo: [https://codeshack.io/multi-select-dropdown-js/](https://codeshack.io/multi-select-dropdown-js/) \n\n## Features\n- **Multiple Selections**: Users can select more than one option in the dropdown.\n- **OptGroups & Sublists**: Natively parses HTML `<optgroup>` tags and automatically generates master toggle switches for groups.\n- **Native Form Validation**: Fully supports the HTML5 `required` attribute with perfectly positioned browser tooltips.\n- **Dark Mode & Themes**: Built-in support for `auto` (follows OS preference), `light`, and `dark` themes.\n- **Async Data Fetching**: Easily load external JSON arrays from APIs using the built-in `.fetch()` method.\n- **Search Functionality**: Includes a built-in search to find options quickly.\n- **Dynamic & Reactive**: Update options dynamically via JS setters. The UI instantly reacts to data changes.\n- **Secure & Accessible**: Built-in XSS protection, memory-leak proof, framework-agnostic, and fully keyboard navigable.\n- **Lightweight**: Lightweight in size and does not depend on other libraries.\n\n## Screenshot\n\n![Screenshot of Multi Select Dropdown](assets/screenshot.png)\n\n## Quick Start\nClone the repository and include the CSS and JavaScript files in your project.\n\nAdd the following to the **head** tag:\n```html\n<link rel=\"stylesheet\" href=\"path/to/multi-select-dropdown.css\">\n```\nAppend the following to the **body** tag:\n```html\n<script src=\"path/to/multi-select-dropdown.js\"></script>\n```\n\n## Usage\n\nHere's a simple example to add the multi-select dropdown to your project. \n\n*(Tip: Always append `[]` to your `name` attribute if you are submitting data to a backend like PHP!)*\n\n```html\n<select id=\"example-multi-select\" name=\"options[]\" data-placeholder=\"Select options\" multiple data-multi-select>\n    <option value=\"option1\">Option 1</option>\n    <option value=\"option2\">Option 2</option>\n    <!-- more options -->\n</select>\n```\nOr initialize it manually via JavaScript:\n```html\n<select id=\"example-multi-select\" name=\"options[]\" multiple>\n    <option value=\"option1\">Option 1</option>\n    <option value=\"option2\">Option 2</option>\n    <!-- more options -->\n</select>\n\n<script src=\"path/to/multi-select-dropdown.js\"></script>\n<script>\n    new MultiSelect(document.getElementById('example-multi-select'), {\n        placeholder: 'Select options',\n        theme: 'auto'\n    });\n</script>\n```\n\n## Configuration\n\nYou can pass a settings object to customize the dropdown behavior and styling:\n\n```javascript\nnew MultiSelect('#example-multi-select', {\n    placeholder: 'Select options',\n    theme: 'auto', // 'auto', 'light', or 'dark'\n    min: 1,  // Minimum number of items required\n    max: 5,  // Maximum number of items that can be selected\n    search: true,  // Enable the search box\n    selectAll: true,  // Add a \"Select All\" toggle\n    listAll: true, // If false, shows \"X selected\" instead of listing tags\n    closeListOnItemSelect: false, // Auto-close the dropdown after selection\n    required: true, // Enforce native HTML5 form validation\n    \n    onChange: function(value, text, element) {\n        console.log('Change:', value, text, element);\n    },\n    onSelect: function(value, text, element) {\n        console.log('Selected:', value, text, element);\n    },\n    onUnselect: function(value, text, element) {\n        console.log('Unselected:', value, text, element);\n    },\n    onMaxReached: function(max) {\n        console.log('Maximum selections reached:', max);\n    }\n});\n```\n\n### Dynamically Adding Options & Groups\n\nYou can dynamically populate the dropdown with grouped data, disabled options, and safe custom HTML injection:\n\n```javascript\nconst mySelect = new MultiSelect('#example-multi-select', {\n    data:[\n        {\n            value: 'opt1',\n            text: 'Option 1',\n            group: 'Basic Settings'\n        },\n        {\n            value: 'opt2',\n            html: '<strong style=\"color: red;\">Option 2 with HTML!</strong>',\n            group: 'Basic Settings'\n        },\n        {\n            value: 'opt3',\n            text: 'Option 3',\n            selected: true,\n            group: 'Advanced Settings'\n        },\n        {\n            value: 'opt4',\n            text: 'Locked Option',\n            disabled: true // Prevents user interaction\n        }\n    ],\n    placeholder: 'Select options',\n    search: true,\n    selectAll: true\n});\n```\n\n### Asynchronous Data Fetching\n\nLoading data from a remote endpoint is handled natively:\n\n```javascript\nconst asyncSelect = new MultiSelect('#example-multi-select', {\n    placeholder: 'Loading remote data...'\n});\n\n// Fetches a JSON array formatted like the data object above\nasyncSelect.fetch('https://api.yoursite.com/endpoint');\n```\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n## Contact\n\nDavid Adams - [info@codeshack.io](mailto:info@codeshack.io)\n\nGitHub: [https://github.com/codeshackio/multi-select-dropdown-js](https://github.com/codeshackio/multi-select-dropdown-js)\n\nX (Twitter): [https://twitter.com/codeshackio](https://twitter.com/codeshackio)\n\nFeel free to open an issue or submit pull requests.\n","readmeFilename":"README.md","_rev":"1-0ad9610e8bb48d9b41b9c179ae5eec5e"}