React Bootstrap Multiselect

React Multiselect - Bootstrap 4 & Material Design.

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap material multiselect is a form control, that after the click displays a collapsable list of multiple values which can be used in forms, menus or surveys.

Multiselect enables you to use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option.

Basic example MDB Pro component

You can bind options data from object and have full control of select component, or you can use select with markup based on HTML. This solution offers a little bit less control over the component - it won't respond on outer options changes (f.e. deletion, sorting or keyboard control).

Note: Select All option is available only within Select with Object based options.

Basic Multiselect 

        
            
              import React, { Component } from "react";
              import { MDBSelect } from "mdbreact";
  
              class SelectPage extends Component {
                state = {
                  options: [
                    {
                      text: "Option 1",
                      value: "1"
                    },
                    {
                      text: "Option 2",
                      value: "2"
                    },
                    {
                      text: "Option 3",
                      value: "3"
                    },
                    {
                      text: "Option 4",
                      value: "4"
                    },
                    {
                      text: "Option 5",
                      value: "5"
                    }
                  ]
                };
  
                render() {
                  return (
                    <div>
                      <MDBSelect
                        multiple
                        options={this.state.options}
                        selected="Choose your option"
                        selectAll
                      />
                    </div>
                  );
                }
              }
  
              export default SelectPage;

MultiSelect with Markup 

        
            
                import React, { Component } from "react";
                import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption} from "mdbreact";
  
                class SelectPage extends Component {
                  render() {
                    return (
                      <div>
                        <MDBSelect>
                          <MDBSelectInput selected="Choose your option" />
                          <MDBSelectOptions>
                            <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                            <MDBSelectOption value="1">Option 1</MDBSelectOption>
                            <MDBSelectOption value="2">Option 2</MDBSelectOption>
                            <MDBSelectOption value="3">Option 3</MDBSelectOption>
                            <MDBSelectOption value="4">Option 4</MDBSelectOption>
                            <MDBSelectOption value="5">Option 5</MDBSelectOption>
                          </MDBSelectOptions>
                        </MDBSelect>
                      </div>
                    );
                  }
                }
  
                export default SelectPage;

Color variations MDB Pro component

In order to change a select color use property color.

        
            
          import React, { Component } from "react";
          import { MDBSelect } from "mdbreact";
  
          class SelectPage extends Component {
            state = {
              options: [
                {
                  text: "Option nr 1",
                  value: "1"
                },
                {
                  text: "Option nr 2",
                  value: "2"
                },
                {
                  text: "Option nr 3",
                  value: "3"
                },
                {
                  text: "Option nr 4",
                  value: "4"
                },
                {
                  text: "Option nr 5",
                  value: "5"
                }
              ]
            };
  
            render() {
              return (
                <div>
                  <MDBSelect
                    color="primary"
                    multiple
                    options={this.state.options}
                    selected="Choose your option"
                    label="Example label"
                  />
                </div>
              );
            }
          }
  
          export default SelectPage;
        
        
    
        
            
          import React, { Component } from "react";
          import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";
  
          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect multiple color="primary" label="Example label">
                    <MDBSelectInput selected="Choose your option" />
                    <MDBSelectOptions>
                      <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                      <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
                      <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
                      <MDBSelectOption value="3">Option nr 3</MDBSelectOption>
                      <MDBSelectOption value="4">Option nr 4</MDBSelectOption>
                      <MDBSelectOption value="5">Option nr 5</MDBSelectOption>
                    </MDBSelectOptions>
                  </MDBSelect>
                </div>
              );
            }
          }
  
          export default SelectPage;

Preselected options MDB Pro component

Use property selected to preselect option while component renders.

        
            
          import React, { Component } from "react";
          import { MDBSelect } from "mdbreact";
  
          class SelectPage extends Component {
            state = {
              options: [
                {
                  text: "Option nr 1",
                  value: "1"
                },
                {
                  text: "Option nr 2",
                  value: "2"
                },
                {
                  checked: true,
                  text: "Option nr 3",
                  value: "3"
                },
                {
                  text: "Option nr 4",
                  value: "4"
                },
                {
                  text: "Option nr 5",
                  value: "5"
                }
              ]
            };
  
            render() {
              return (
                <div>
                  <MDBSelect
                    multiple
                    search
                    options={this.state.options}
                    selected="Choose your option"
                    label="Example label"
                    selectAll
                  />
                </div>
              );
            }
          }
  
          export default SelectPage;
        
        
    
        
            
          import React, { Component } from "react";
          import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";
  
          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect multiple label="Example label">
                    <MDBSelectInput selected="Choose your option" />
                    <MDBSelectOptions>
                      <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                      <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
                      <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
                      <MDBSelectOption value="3" selected>Option nr 3</MDBSelectOption>
                      <MDBSelectOption value="4">Option nr 4</MDBSelectOption>
                      <MDBSelectOption value="5">Option nr 5</MDBSelectOption>
                    </MDBSelectOptions>
                  </MDBSelect>
                </div>
              );
            }
          }
  
          export default SelectPage;

Option groups MDB Pro component

Separate groups of options using disabled option.

        
            
          import React, { Component } from "react";
          import { MDBSelect } from "mdbreact";
  
          class SelectPage extends Component {
            state = {
              options: [
                {
                  disabled: true,
                  text: "team 1"
                },
                {
                  text: "Option 1",
                  value: "1"
                },
                {
                  text: "Option 2",
                  value: "2"
                },
                {
                  disabled: true,
                  text: "team 2"
                },
                {
                  checked: true,
                  text: "Option 3",
                  value: "3"
                },
                {
                  text: "Option 4",
                  value: "4"
                }
              ]
            };
  
            render() {
              return (
                <div>
                  <MDBSelect
                    multiple
                    options={this.state.options}
                    selected=""
                    label="Example label"
                  />
                </div>
              );
            }
          }
  
          export default SelectPage;
        
        
    
        
            
          import React, { Component } from "react";
          import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";
  
          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect multiple label="Example label">
                    <MDBSelectInput selected="Choose your option" />
                    <MDBSelectOptions>
                      <MDBSelectOption disabled>team 1</MDBSelectOption>
                      <MDBSelectOption value="1">Option 1</MDBSelectOption>
                      <MDBSelectOption value="2">Option 2</MDBSelectOption>
                      <MDBSelectOption separator>team 2</MDBSelectOption>
                      <MDBSelectOption value="3">Option 3</MDBSelectOption>
                      <MDBSelectOption value="4">Option 4</MDBSelectOption>
                    </MDBSelectOptions>
                  </MDBSelect>
                </div>
              );
            }
          }
  
          export default SelectPage;

Multiselect with icons MDB Pro component

Beautify your select and use icons inside option components.

        
            
          import React, { Component } from "react";
          import { MDBSelect } from "mdbreact";
  
          class SelectPage extends Component {
            state = {
              options: [
                {
                  icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp",
                  value: "example 1",
                  text: "User nr 1"
                },
                {
                  icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp",
                  value: "example 2",
                  text: "User nr 2"
                },
                {
                  icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp",
                  value: "example 3",
                  text: "User nr 3"
                }
              ]
            };
  
            render() {
              return (
                <div>
                  <MDBSelect
                    multiple
                    options={this.state.options}
                    selected="Choose your option"
                    label="Example label"
                    selectAll
                  />
                </div>
              );
            }
          }
  
          export default SelectPage;
        
        
    
        
            
          import React, { Component } from "react";
          import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";
  
          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect multiple label="Example label">
                    <MDBSelectInput selected="Choose your option" />
                    <MDBSelectOptions>
                        <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                        <MDBSelectOption
                          value="example 1"
                          icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp"
                        >
                          User nr 1
                        </MDBSelectOption>
                        <MDBSelectOption
                          value="example 2"
                          icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp"
                        >
                          User nr 2
                        </MDBSelectOption>
                        <MDBSelectOption
                          value="example 3"
                          icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp"
                        >
                          User nr 3
                        </MDBSelectOption>
                      </MDBSelectOptions>
                  </MDBSelect>
                </div>
              );
            }
          }
  
          export default SelectPage;

Disabled select option MDB Pro component

By adding a disabled attribute to the particular option, you can make it unselectable.

        
            
          import React, { Component } from "react";
          import { MDBSelect } from "mdbreact";
  
          class SelectPage extends Component {
            state = {
              options: [
                {
                  disabled: true,
                  text: "Disabled option",
                  value: "1"
                },
                {
                  text: "Option nr 2",
                  value: "2"
                },
                {
                  text: "Option nr 3",
                  value: "3"
                }
              ]
            };
  
            render() {
              return (
                <div>
                  <MDBSelect
                    multiple
                    options={this.state.options}
                    selected="Choose your option"
                    label="Example label"
                    selectAll
                  />
                </div>
              );
            }
          }
  
          export default SelectPage;
        
        
    
        
            
          import React, { Component } from "react";
          import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";
  
          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect multiple label="Example label">
                    <MDBSelectInput selected="Choose your option" />
                    <MDBSelectOptions>
                      <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                      <MDBSelectOption value="1" disabled>Disabled option</MDBSelectOption>
                      <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
                      <MDBSelectOption value="3">Option nr 3</MDBSelectOption>
                    </MDBSelectOptions>
                  </MDBSelect>
                </div>
              );
            }
          }
  
          export default SelectPage;

React Select - API

In this section you will find advanced information about the Select component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Imports 

        
            
          import React from 'react';
          import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from 'mdbreact';

Usage

There are two ways to bind your data into Select.
You can use regular JSX/HTML markup, or build an Array of object structured data. 

        
            
          import React, { Component } from "react";
          import { MDBSelect } from "mdbreact";

          class SelectPage extends Component {
            state = {
              options: [
                {
                  checked: false,
                  disabled: false,
                  icon: null,
                  value: "1",
                  text: "Option 1"
                },
                {
                  checked: false,
                  disabled: false,
                  icon: null,
                  value: "2",
                  text: "Option 2"
                },
                {
                  checked: false,
                  disabled: false,
                  icon: null,
                  value: "3",
                  text: "Option 3"
                }
              ]
            };

            render() {
              return (
                <div>
                  <MDBSelect
                    multiple
                    options={this.state.options}
                    selected="Choose your option"
                  />
                  <label>Example label</label>
                </div>
              );
            }
          }

          export default SelectPage;
        
        
    
        
            
          import React, { Component } from "react";
          import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";

          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect>
                    <MDBSelectInput selected="Choose your option" />
                    <SelectOptions>
                      <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                      <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
                      <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
                      <MDBSelectOption value="3">Option nr 3</MDBSelectOption>
                    </MDBSelectOptions>
                  </MDBSelect>
                  <label>Example label</label>
                </div>
              );
            }
          }

          export default SelectPage;

API Reference: Select Properties

The table below shows the configuration options of the MDBSelect component.

Name Type Default Description Example
className String "select-wrapper md-form mdb-select" Select wrapper classes. <MDBSelect className="my-custom-class">
color String Sets colorfull hover efect on select options. <MDBSelect color="primary">
label String Sets animated label for the select input. <MDBSelect label="Example label">
labelClass String Sets custom class for select label (f.e. to change background color). <MDBSelect labelClass="customClass">
multiple Boolean false Allows to select multiple options. <MDBSelect multiple={true}>
options Array(Object) [] Sets options array as source of data. This property is used in alternative Select version. <MDBSelect options={this.state.options} />
outline Boolean false Switch outline mode - Material 2.0 design with outlines and animated label. <MDBSelect outline />
Next properties works only for Select with data Array!
required Boolean false Makes select required when submitting form. <MDBSelect required >
search Boolean false Search element will appear as the first child of select. <MDBSelect search={true} >
searchLabel String Search Changes default label of additional search element. <MDBSelect searchLabel="Find option" />
searchId String selectSearchInput Changes default id of additional search element. <MDBSelect searchId="id" />
selected String Set default select text content. <MDBSelect selected="Choose option" >
selectAll Boolean false Enables Select All button. <MDBSelect selectAll >
selectAllLabel String "Select All" Sets text for Select All button. <MDBSelect selectAllLabel="Select All" >
selectAllValue String "0" Sets value for Select All button. <MDBSelect selectAllValue="0" >
focusBackgroundColor String "#eee" Sets background-color for focused option. <MDBSelect focusBackgroundColor="#eee" >
focusShadow String "inset 0px -17px 15px -16px rgba(0, 0, 0, 0.35)" Sets box-shadow for focused option. <MDBSelect focusShadow="inset 0px -17px 15px -16px rgba(0, 0, 0, 0.35)" >

API Reference: Select Methods

Name Parameters Description Example
getTextContent Returns input text content. Use this method to get string with selected options. <MDBSelect getTextContent={this.handleSelectChange} >
getValue Returns Select value. Use this method to get array with selected options. <MDBSelect getValue={this.handleSelectChange} >

API Reference: SelectInput Properties

The table below shows the configuration options of the MDBSelectInput component.

Name Type Default Description Example
className String Sets custom classes. <MDBSelectInput className="customClass" >
selected String Works only with Select with markup! Set default select text content. <MDBSelect selected="Choose option" >

API Reference: SelectOptions Properties

The table below shows the configuration options of the MDBSelectOptions component.

Name Type Default Description Example
className String Sets custom classes. <MDBSelectOptions className="customClass" >
search Boolean false Search element will appear as the firs child of select. <MDBSelectOptions search >
searchLabel String Search Changes default label of additional search element. <MDBSelectOptions searchLabel="Find option" />
searchId String selectSearchInput Changes default id of additional search element. <MDBSelectOptions searchId="id" />

API Reference: SelectOption Properties

The table below shows the configuration options of the MDBSelectOption component.

Name Type Default Description Example
checked Boolean false If true - the option will be preselected during mount. <MDBSelectOption checked >
className String Sets custom classes. <MDBSelectOption className="customClass" >
disabled Boolean false If true - the option wont be clickable. <MDBSelectOption disabled >
separator Boolean false If true - adds top border (sets disabled to true). <MDBSelectOption separator >
icon String Inserts icon into select option. <MDBSelectOption icon="icon_url" >
value String Sets option value (you can still use text content - value will be readable in getValue method). <MDBSelectOption value="option 1" >

API Reference: Options Array Structure

The table below shows the configuration options as an list of objects for alternative Select.

Name Type Default Description Example
checked Boolean If true - the option will be preselected during mount. { checked: true }
disabled Boolean If true - the option wont be clickable. { disabled: true }
icon String Inserts icon into select option. { icon="icon_url" }
text String Sets option text content. { text: "Option one" }
value String Sets option value. { value: "1" }