{"_id":"@amrit981/react-multi-select-checkbox","_rev":"7-e729faed7b59684dc4cb40c860da138a","name":"@amrit981/react-multi-select-checkbox","dist-tags":{"latest":"0.0.8"},"versions":{"0.0.1":{"name":"@amrit981/react-multi-select-checkbox","version":"0.0.1","author":{"name":"Amrit Anand"},"license":"ISC","_id":"@amrit981/react-multi-select-checkbox@0.0.1","maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"dist":{"shasum":"c5a002eb886117b457f286c413984c624ff62156","tarball":"https://registry.npmjs.org/@amrit981/react-multi-select-checkbox/-/react-multi-select-checkbox-0.0.1.tgz","fileCount":13,"integrity":"sha512-gV3loJ2UuLySIn6fBvA4EDx6rr1DFJhylyZhdZ8FqLQmxMEwKPJcj48BuN0ivSimuHY1EAA2pobcb1/+Kp/EYw==","signatures":[{"sig":"MEUCIQD93fWChSGHHPn8UbnDp6jge9IQ28lXqx1lXLiZ4sNFHQIgGBud4d7qjtgu0hG/wlQNH2hNwW96R2TIN1/t2JUH4jI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130342},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"8274b5e18e43c599c82a1804cd78c5414de3a298","scripts":{"test":"echo \"Error: no test specified\" && exit 1","rollup":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"amrit981","email":"amritanand981@gmail.com"},"_npmVersion":"10.8.1","description":"React multi select option using checkbox","directories":{},"_nodeVersion":"21.6.2","dependencies":{"@types/react":"^19.1.13","rollup-plugin-postcss":"^4.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.1","tslib":"^2.8.1","typescript":"^5.9.2","rollup-plugin-dts":"^6.2.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-typescript":"^12.1.4","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/react-multi-select-checkbox_0.0.1_1757788107931_0.43749941593696473","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@amrit981/react-multi-select-checkbox","version":"0.0.2","_id":"@amrit981/react-multi-select-checkbox@0.0.2","maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"dist":{"shasum":"0dd053a7a763f983298544eb6e262d68955599e8","tarball":"https://registry.npmjs.org/@amrit981/react-multi-select-checkbox/-/react-multi-select-checkbox-0.0.2.tgz","fileCount":7,"integrity":"sha512-ja0K/weLz4TOhfHwN2JmuIgMto8dP9JXMUKoYj37AEylirNPyex8fzYbsri/sEhDkriyL0JFHRhV/FFG1iUtug==","signatures":[{"sig":"MEQCIB7hGjyE61LuvJgoCxAvFw7mtu92t/hddlIOVCfUy4fCAiBDbe/rp3RgeNlA/8++4Is8bv0RJIwNKChLZ4l23XXLFA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62589},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"8274b5e18e43c599c82a1804cd78c5414de3a298","scripts":{"build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"amrit981","email":"amritanand981@gmail.com"},"_npmVersion":"10.8.1","description":"React multi select option using checkbox","directories":{},"sideEffects":false,"_nodeVersion":"21.6.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","typescript":"^5.9.2","@types/react":"^19.1.13","rollup-plugin-dts":"^6.2.3","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-typescript":"^12.1.4","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-multi-select-checkbox_0.0.2_1757788958862_0.017830771283352975","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@amrit981/react-multi-select-checkbox","version":"0.0.3","_id":"@amrit981/react-multi-select-checkbox@0.0.3","maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"dist":{"shasum":"a837fc46fbbf7ccd4982202a401efe2af9e7d485","tarball":"https://registry.npmjs.org/@amrit981/react-multi-select-checkbox/-/react-multi-select-checkbox-0.0.3.tgz","fileCount":7,"integrity":"sha512-/oK/XdNapwfKgmbog2Z189Rn8NeVjUGqRlG8HhoVow9cPvigHZEPYFTPNoI3MIvxDZUIF7TYYfOJf6cT+RV7yg==","signatures":[{"sig":"MEYCIQD2NKRBoriAPnEnYViCdhb87u5CBmhJySpNeaHPmTLy6QIhANl3aWv6he7Ips3nKlo1RetWY1eBThQWFtvcm9U62OiM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62590},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"788d87256578231bc7249e30365d9ec0cb0939e9","scripts":{"build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"amrit981","email":"amritanand981@gmail.com"},"_npmVersion":"10.8.1","description":"React multi select option using checkbox","directories":{},"sideEffects":false,"_nodeVersion":"21.6.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","typescript":"^5.9.2","@types/react":"^19.1.13","rollup-plugin-dts":"^6.2.3","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-typescript":"^12.1.4","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-multi-select-checkbox_0.0.3_1757789795969_0.560268159224852","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@amrit981/react-multi-select-checkbox","version":"0.0.4","_id":"@amrit981/react-multi-select-checkbox@0.0.4","maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"dist":{"shasum":"6373231349382110d923c37c55d6b88ff4edd430","tarball":"https://registry.npmjs.org/@amrit981/react-multi-select-checkbox/-/react-multi-select-checkbox-0.0.4.tgz","fileCount":7,"integrity":"sha512-Y2QM7kUxIf++Q27ctUIVQYRKG7/tkaYLxPRzrQBWFZmFxVfrVVy03GanGJY59W1rmL1bQefgVF+L/NBktSsfOA==","signatures":[{"sig":"MEQCIBzjL9ltXN4AEXsaSeKxOmw3HtSWE45CRjuyjKeiKkgEAiAncevjKZ0Sr42+2Zhvcd3MlCIKgP4ZSIaWNbURwVVYCA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62462},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"e569bd41fee0e4239606560c49e4637935b15510","scripts":{"build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"amrit981","email":"amritanand981@gmail.com"},"_npmVersion":"10.8.1","description":"React multi select option using checkbox","directories":{},"sideEffects":false,"_nodeVersion":"21.6.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","typescript":"^5.9.2","@types/react":"^16.14.62","rollup-plugin-dts":"^6.2.3","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-typescript":"^12.1.4","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8 <20","react-dom":">=16.8 <20"},"_npmOperationalInternal":{"tmp":"tmp/react-multi-select-checkbox_0.0.4_1757790849015_0.8760438503772221","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@amrit981/react-multi-select-checkbox","version":"0.0.6","_id":"@amrit981/react-multi-select-checkbox@0.0.6","maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"dist":{"shasum":"dbbf8891634a76ddc211d97a10a49b7393d79422","tarball":"https://registry.npmjs.org/@amrit981/react-multi-select-checkbox/-/react-multi-select-checkbox-0.0.6.tgz","fileCount":8,"integrity":"sha512-rfQK7pxsLTY/m5wHHnBI510lp+9y0D1xhplhXryPXLEoj4T+amqz79+QsUhb4tpmBrBGghtRICkOqw434+K9tw==","signatures":[{"sig":"MEUCIQCNl7CYokDK5mdGDYq+Oiooq1k9lzdar5lV1PJoXH2sBgIgLFI+w+gEt1RZrCR3F9NSgfQrNMrAV8pzr/CUHKRNSbw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25093},"main":"dist/index.cjs","types":"dist/index.d.ts","gitHead":"33faccca1b707aeeb8e214225fc24dce88a13b97","scripts":{"build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"amrit981","email":"amritanand981@gmail.com"},"_npmVersion":"10.8.1","description":"React multi select option using checkbox","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"21.6.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","typescript":"^5.9.2","@types/react":"^16.14.62","rollup-plugin-dts":"^6.2.3","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-typescript":"^12.1.4","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8 <20","react-dom":">=16.8 <20"},"_npmOperationalInternal":{"tmp":"tmp/react-multi-select-checkbox_0.0.6_1763209448409_0.0389844300933988","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@amrit981/react-multi-select-checkbox","version":"0.0.7","_id":"@amrit981/react-multi-select-checkbox@0.0.7","maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"dist":{"shasum":"c61c4b1decf7872cb8d2618418cdf28cc8343b69","tarball":"https://registry.npmjs.org/@amrit981/react-multi-select-checkbox/-/react-multi-select-checkbox-0.0.7.tgz","fileCount":9,"integrity":"sha512-rTFlEVu/UWHTuL05TO+XsuLts1IiJlHR7jkZ0PJkg/7qnejrRc/x2/wzV6g8LoVztfWIZCkBRD9f3b9B+vRCJQ==","signatures":[{"sig":"MEUCIQC22TtKL2JEzaiQbcWMm863ri9ikEuFAtnX3sc8ny2j/AIgNG1rmtcUlOKQBIn+ibqUE1TNMG5hgzp+/AnDWl9YkB0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22770},"main":"dist/index.cjs","types":"dist/index.d.ts","gitHead":"991b51fc0bae5e349a4b76960a51bb9d29315b08","scripts":{"build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"amrit981","email":"amritanand981@gmail.com"},"_npmVersion":"10.9.3","description":"React multi select option using checkbox","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","typescript":"^5.9.2","@types/react":"^16.14.62","rollup-plugin-dts":"^6.2.3","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-typescript":"^12.1.4","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8 <20","react-dom":">=16.8 <20"},"_npmOperationalInternal":{"tmp":"tmp/react-multi-select-checkbox_0.0.7_1763379748751_0.7441368000666655","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@amrit981/react-multi-select-checkbox","version":"0.0.8","description":"React multi select option using checkbox","repository":{"type":"git","url":"git+https://github.com/cB-Amrit-Anand/react-multi-select-checkbox.git"},"homepage":"https://github.com/cB-Amrit-Anand/react-multi-select-checkbox#readme","bugs":{"url":"https://github.com/cB-Amrit-Anand/react-multi-select-checkbox/issues"},"main":"dist/index.cjs","types":"dist/index.d.ts","sideEffects":["**/*.css"],"publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs"},"peerDependencies":{"react":">=16.8 <20","react-dom":">=16.8 <20"},"devDependencies":{"@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.4","@types/react":"^16.14.62","rollup-plugin-dts":"^6.2.3","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tslib":"^2.8.1","typescript":"^5.9.2"},"_id":"@amrit981/react-multi-select-checkbox@0.0.8","gitHead":"705ba1d2a6b70e438f3aaa67faadcc50953ad86f","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-3H2IARSSaSOVo7Ku0s+M3lJsMI8nKSY55cfl7MHRJWmctK9dR1rHN0+NpOI2Fibs/j6U4yBgyMlXEfX6HMvHRQ==","shasum":"beeadb07d6dc04c136667baae52864fa31608716","tarball":"https://registry.npmjs.org/@amrit981/react-multi-select-checkbox/-/react-multi-select-checkbox-0.0.8.tgz","fileCount":9,"unpackedSize":22792,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCiSf5uQXeJbVXRNK7S4r1oBe3WHEaVszoO8QuNsKpozAIhAN+y7WZTp9hsDUEUpdsSnfdaFXIpzgqqaYauKeJU45Jo"}]},"_npmUser":{"name":"amrit981","email":"amritanand981@gmail.com"},"directories":{},"maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-multi-select-checkbox_0.0.8_1763380188527_0.6471356847894005"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-13T18:28:27.841Z","modified":"2025-11-17T11:49:48.918Z","0.0.1":"2025-09-13T18:28:28.105Z","0.0.2":"2025-09-13T18:42:39.049Z","0.0.3":"2025-09-13T18:56:36.167Z","0.0.4":"2025-09-13T19:14:09.224Z","0.0.6":"2025-11-15T12:24:08.604Z","0.0.7":"2025-11-17T11:42:28.914Z","0.0.8":"2025-11-17T11:49:48.718Z"},"description":"React multi select option using checkbox","maintainers":[{"name":"amrit981","email":"amritanand981@gmail.com"}],"readme":"## @amrit981/react-multi-select-checkbox\n\nA lightweight, dependency-free React component that renders a searchable multi-select dropdown built with native checkboxes. It ships with a minimal CSS file so you can get started quickly and override styles as needed.\n\n### Features\n- Search input filters options client-side as you type.\n- “Select All” checkbox toggles the entire list in one click.\n- Displays a badge-style summary (`All Selected`, `3 Selected`, or placeholder).\n- Fully controlled via props for options, value and change events.\n- Ships TypeScript definitions out of the box.\n\n### Installation\n```bash\nnpm install @amrit981/react-multi-select-checkbox\n# or\nyarn add @amrit981/react-multi-select-checkbox\n```\n\n### Quick Start\n```tsx\nimport React, { useState } from 'react';\nimport { ReactMultiSelectCheckbox } from '@amrit981/react-multi-select-checkbox';\nimport '@amrit981/react-multi-select-checkbox/dist/index.css'; // optional: default styles\n\nconst cityOptions = [\n  { label: 'New York', value: 'nyc' },\n  { label: 'San Francisco', value: 'sf' },\n  { label: 'Seattle', value: 'sea' },\n];\n\nexport default function CitiesFilter() {\n  const [selectedCities, setSelectedCities] = useState([]);\n\n  return (\n    <ReactMultiSelectCheckbox\n      options={cityOptions}\n      value={selectedCities}\n      placeholder=\"Pick cities\"\n      onChange={setSelectedCities}\n    />\n  );\n}\n```\n\n> **Styling:** The component imports `../css/styles.css` internally. If you need to customize, copy the CSS selectors into your app and tweak them, or disable the default styles with a bundler config that ignores CSS side effects.\n\n### Props\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `Array<{ label: string; value: string \\| number; }>` | `[]` | Items rendered in the dropdown. |\n| `placeholder` | `string` | `'Select...'` | Text shown when nothing is selected. |\n| `value` | `Array<MultiSelectOption>` | `[]` | Controlled value for selected options. |\n| `onChange` | `(selected: MultiSelectOption[]) => void` | `undefined` | Called whenever the selection changes; receives the full selected array. |","readmeFilename":"README.md","homepage":"https://github.com/cB-Amrit-Anand/react-multi-select-checkbox#readme","repository":{"type":"git","url":"git+https://github.com/cB-Amrit-Anand/react-multi-select-checkbox.git"},"bugs":{"url":"https://github.com/cB-Amrit-Anand/react-multi-select-checkbox/issues"}}