MultiSelectCheckBox
Simple and lightweight multiple selection component with checkboxes, search and select-all
✨ Features
- Select All Checkbox Field
- Search Box for searching list of checkbox items
- Web Accessibility(no need of mouse => Use
space
to select/unselect checkbox , Usetab
for switching element)
Installation and usage
yarn add multi-select-checkbox
npm i multi-select-checkbox
Then use it in your app:
With React Component
import React from "react";
import { MultiSelectCheckBox } from "multi-select-checkbox/dist/MultiSelectCheckBox";
function App() {
const CheckBoxList = [
{
label: "eat",
value: "eat",
},
{
label: "sleep",
value: "sleep",
},
{
label: "coding",
value: "coding",
},
{
label: "Repeat",
value: "Repeat",
},
{
label: "Reapeat again!",
value: "Reapeat again!",
},
{
label: "Reapeat again again!",
value: "Reapeat again again!",
},
];
const [selectedValue, setSelectedValue] = React.useState([]);
return (
<div className="">
<p>{JSON.stringify(selectedValue, null, 2)}</p>
<MultiSelectCheckBox
selectAllShow={true}
selectedCheckBox={[
{
label: "eat",
value: "eat",
},
]}
searchLabelName="Search : "
searchLabelClassName="searchLabelClassName"
searchFilterParentDivClassName="searchFilterParentDivClassName"
searchFilterClassName="searchFilterClassName"
searchPlaceHolderName="Search Here..."
showSearchBox={true}
selectAllClassLabelName="select_all_label_class_name"
listOfCheckBoxItemsLabelClassName="list_of_checkbox_item_label_class_name"
selectAllParentDivClassName="selectAllParentDivClassName"
listOfAllCheckBoxParentDivClassName="listOfAllCheckBoxParentDivClassName"
selectAllShowClassName="select_all_checkbox_classname"
listOfCheckBoxItemsClassName="list_of_all_checkbox_classname"
CheckBoxList={CheckBoxList}
selectAllLabelName="Select All..."
onChange={function (item) {
// get All list of selected Item....
setSelectedValue(item);
}}
/>
</div>
);
}
export default App;
Props
Common props you may want to specify include:
-
selectAllShow
- show select all option -
selectedCheckBox
- show already selected checkbox -
selectAllClassLabelName
- apply a className to the select all label tag -
selectAllParentDivClassName
- apply classNames to select all div tag,which contains select all checkbox field and label -
selectAllShowClassName
- apply a className to the select all checkbox -
selectAllLabelName
- change the text of select all label name -
listOfCheckBoxItemsLabelClassName
- apply a className to the list of checkbox items label -
listOfAllCheckBoxParentDivClassName
- apply classNames to list of checkbox items div tag,which contains list of checkbox field and label -
listOfCheckBoxItemsClassName
- apply a className to the list of checkboxes -
CheckBoxList
- need to pass an array of an objects , to show list of all checkbox items -
onChange
- get All list of selected Item -
searchFilterParentDivClassName
- search box parent div class name -
searchFilterClassName
- search box class name -
searchPlaceHolderName
- search box placeholder name -
showSearchBox
- show search box , by default it will be true -
searchLabelName
- search label name -
searchLabelClassName
- search label class name