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


    • mvalimento