mui-checkboxlist

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.

Usage

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

Styling

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);

License

MIT