React Multiselect Checkboxes

A flexible, stylable, compact multi-select component.

It's based on react-select and has a similar API for data and styling.

Installation

npm i -S react-multiselect-checkboxes

Basic usage

import ReactMultiSelectCheckboxes from 'react-multiselect-checkboxes';
 
// ...
const options = [
  { label: 'Thing 1', value: 1},
  { label: 'Thing 2', value: 2},
];
<ReactMultiSelectCheckboxes options={options} />

Props

Nearly all of the options from react-select are supported, except where they don't make sense (for instance, isMulti={false} isn't supported, since this is always in multi-select mode). These props are passed directly to the underlying Select component. In addition, there are some options which are specific to react-multiselect-checkboxes:

Prop	Type	Default	Description
placeholderButtonLabel	PropTypes.string	'Select...'	Displayed on dropdown button if no value is selected.
getDropdownButtonLabel	PropTypes.func	({ placeholderButtonLabel, value }) => {/* if-else logic*/}	Get the label for the dropdown, based on the placeholder and the current value. By default this is (a) the placeholder, if nothing is selected; (b) the selected value's label, if one option is selected; or (c) the number selected (e.g. "3 selected") if more than one option is selected
rightAligned	PropTypes.bool	false	Whether to align the menu to the right side of the component. By default it's flush with the left.

Styling

Like props, styles supported by react-select are passed directly into the underlying Select component. Some of the defaults have been tweaked for the multiselect, but you can override them like normal (see https://react-select.com/styles). In addition, there are some styles which are specific to react-multiselect-checkboxes:

Style key	Options	Description	Screenshot
dropdownButton	{ value, isOpen, width }	Used to style the dropdown button component. Pressing this component opens the menu.
groupHeading	{ checked, indeterminate }	This exists in react-select already -- it's used to style the group heading label. We add two new options based on the selected state of the group: checked is true if all options in the group are selected, indeterminate if only some are selected.

Component replacement

Again, we're taking this API straight from react-select, and you can replace any of the basic Select components as well. There are some new components which are specific to react-multiselect-checkboxes too:

Dropdown (source)

Prop	Type	Description
children	PropTypes.node	The children for the menu. Note: this is not the dropdown button / click target.
isOpen	PropTypes.bool	Is the Dropdown open right now?
rightAligned	PropTypes.bool	Whether to align the menu to the right side of the component. By default it's flush with the left.
onClose	PropTypes.func	Callback function to run when the menu is closed. In the default implementation this happens on outside click.
target	PropTypes.node	The dropdown button / click target. Clicking on this will generally open the menu.

DropdownButton (source)

Prop	Type	Description
children	PropTypes.node	The contents of the dropdown button, generally a string.
onPress	PropTypes.func	Callback function to run when the dropdown button is pressed. This will generally open the menu.
iconAfter	PropTypes.node	An icon component to render after the button's contents. By default it's a down-facing chevron.
style	PropTypes.object	The style to apply to the dropdown button. If you're doing custom styling, you'll probably ignore it.

example:

step :1

Installation

npm i -S react-multiselect-checkboxes
 
 
 
data.js
export default [{
    "id": 1,
    "value": "9ce42304-b732-4791-9731-6f299b6df8c7",
    "label": "Blue"
  }, {
    "id": 2,
    "value": "90419f06-7d07-45c8-bcec-d675096fe27f",
    "label": "Goldenrod"
  }, {
    "id": 3,
    "value": "a23521da-0a48-4ef6-baa2-d727704f65c2",
    "label": "Teal"
  }, {
    "id": 4,
    "value": "34b2b58a-0123-49e2-b2de-1eef0922139b",
    "label": "Puce"
  }, {
    "id": 5,
    "value": "0fceaec7-fb46-4aef-994b-863a97130168",
    "label": "Khaki"
  }, {
    "id": 6,
    "value": "b68c6b76-bbe0-49a6-8a90-209b8d88d353",
    "label": "Green"
  }, {
    "id": 7,
    "value": "e2829c11-0960-490c-b19b-5c5bb26a18ce",
    "label": "Crimson"
  },  {
    "id": 9,
    "value": "841e6f9f-1e19-4501-8b75-cd153282ed21",
    "label": "Orange"
  }, {
    "id": 10,
    "value": "9346ba4b-8b3e-4c06-b930-cb3d98c58890",
    "label": "Turquoise"
  }, {
    "id": 11,
    "value": "7294d507-d6c5-47bf-8ef3-c291c273b647",
    "label": "Violet"
  }, {
    "id": 12,
    "value": "451d4254-a882-4d53-a4ca-c7cb4707d1a5",
    "label": "Red"
  }, {
    "id": 15,
    "value": "2378fade-f686-4f0d-bf00-4e5213032c9b",
    "label": "Aquamarine"
  },    {
    "id": 20,
    "value": "77ec7a0b-329d-4643-bbc7-0fa12c788ded",
    "label": "Mauv"
  }]
 
 MultiSelect.js

import React from "react"

import ReactMultiSelectCheckboxes from 'react-multiselect-checkboxes';

import options from "./data"

const MultiSelect = () => {

  return <ReactMultiSelectCheckboxes options={options}/>

}

export default MultiSelect;

MultiSelectAll.js

import React, { useState, useEffect } from "react";

import ReactMultiSelectCheckboxes from "react-multiselect-checkboxes";

import options from "./data";

const MultiSelectAll = () => {

  const [selectedOptions, setSelectedOptions] = useState([]);

  useEffect(() => {

    setSelectedOptions([{ label: "All", value: "*" }, ...options]);

  }, []);

  function getDropdownButtonLabel({ placeholderButtonLabel, value }) {

    if (value && value.some((o) => o.value === "*")) {

      return `${placeholderButtonLabel}: All`;

    } else {

      return `${placeholderButtonLabel}: ${value.length} selected`;

    }

  }

  function onChange(value, event) {

    if (event.action === "select-option" && event.option.value === "*") {

      this.setState(this.options);

    } else if (

      event.action === "deselect-option" &&

      event.option.value === "*"

    ) {

      this.setState([]);

    } else if (event.action === "deselect-option") {

      this.setState(value.filter((o) => o.value !== "*"));

    } else if (value.length === this.options.length - 1) {

      this.setState(this.options);

    } else {

      this.setState(value);

    }

  }

  return (

    <ReactMultiSelectCheckboxes

      options={[{ label: "All", value: "*" }, ...options]}

      placeholderButtonLabel="Colors"

      getDropdownButtonLabel={getDropdownButtonLabel}

      value={selectedOptions}

      onChange={onChange}

      setState={setSelectedOptions}

    />

  );

};

export default MultiSelectAll;

App.js

import React from "react";

import MultiSelect from "./MultiSelect";

import MultiSelectAll from "./MultiSelectAll";

export default function App() {

  return (

    <div className="App">

      <MultiSelect />

      <br />

      <MultiSelectAll />

    </div>

  );

}