Have ideas to improve npm?Join in the discussion! »


1.2.0 • Public • Published


This package is a checkbox list component based on Material-UI. This is designed for use with react and react-final-form.

  • It accepts an array of items to be listed for selection
  • Produces an array of selected items
  • Customizable in terms of style and function

Check out this Live Demo.


Your application must have the following packages installed, these are declared as peer dependencies and won't we installed automatically by installing this component:

  • @material-ui/core
  • @material-ui/icons
  • lodash

Install the actual package:

$ npm install mui-checkboxlist

Then you just need to import it into your React application:

import { CheckboxLabelValueSelect, CheckboxValueSelect } from "mui-checkboxlist";
//Use **CheckboxLabelValueSelect** when passing items with the following structure:
const listItems_labelValue = [{
    label: "White"
    value: "#FFFFFF"
//Use **CheckboxValueSelect** when passing plain strings:
const listItems_valueOnly = [ "white", ... ];

Props & Features

Props Mandatory Default Description
checkedIcon no Icon to show when the checkbox controls are checked.
disabled no false If set to true, checkboxes and textfields are disabled.
label no Displays a label to describe the whole list.
limit no If present, it should container a number called 'max' which limits the selected items to the specified number and 'deleteLast' which when set to true, will uncheck the last checked item instead of the first.
icon no Icon to show when the checkbox controls are not checked.
listItems yes Contains all the items available for selection.
onChange yes This function will provide the updated selected values. Basic structure is (selectedItems) => {}, where selectedItems is an array.
searchBarLabel no If provided, search bar will be displayed and its value will be the placeholder.
selectAllLabel no If provided, a select/deselect-all checkbox labeled with the provided value will be displayed. Event if present but field 'limit' is also present, the selectAll checkbox will not display.
selectedItems no [] Contains the initially selected items.
selectedItemsFirst no false If set to true, selected items will be displayed on top of the list. Perfect for long lists.
statusBar no false If provided, a status bar with the number of selected items will be displayed.


If you want to override the styles, you can use withStyles:

import CheckboxValueSelect from './CheckboxValueSelect';
import {withStyles} from '@material-ui/styles';
const styles = {
  root: {
    textAlign: 'center'
const StyledCheckboxValueSelect = withStyles(styles)(CheckboxValueSelect);




npm i mui-checkboxlist

DownloadsWeekly Downloads






Unpacked Size

82.7 kB

Total Files


Last publish


  • avatar