@amrit981/react-multi-select-checkbox

A 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.

$3

- Search input filters options client-side as you type.
- “Select All” checkbox toggles the entire list in one click.
- Displays a badge-style summary (All Selected, 3 Selected, or placeholder).
- Fully controlled via props for options, value and change events.
- Ships TypeScript definitions out of the box.

$3

``bash
npm install @amrit981/react-multi-select-checkbox

or

yarn add @amrit981/react-multi-select-checkbox
`

$3

`tsx
import React, { useState } from 'react';
import { ReactMultiSelectCheckbox } from '@amrit981/react-multi-select-checkbox';
import '@amrit981/react-multi-select-checkbox/dist/index.css'; // optional: default styles

const cityOptions = [
{ label: 'New York', value: 'nyc' },
{ label: 'San Francisco', value: 'sf' },
{ label: 'Seattle', value: 'sea' },
];

export default function CitiesFilter() {
const [selectedCities, setSelectedCities] = useState([]);

return (
options={cityOptions}
value={selectedCities}
placeholder="Pick cities"
onChange={setSelectedCities}
/>
);
}
`

> 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.

$3


| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | Array<{ label: string; value: string \| number; }> | [] | Items rendered in the dropdown. |
| placeholder | string | 'Select...' | Text shown when nothing is selected. |
| value | Array | [] | Controlled value for selected options. |
| onChange | (selected: MultiSelectOption[]) => void | undefined` | Called whenever the selection changes; receives the full selected array. |