Rate these docs

React Bootstrap Multiselect MDB Pro component

React Multiselect - Bootstrap 4 & Material Design.

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.


Basic example MDB Pro component

Basic MultiSelect


            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;
          

Alternative Multiselect

You can use select with normal markup as above, or you can bind options data from object and have full control of select component.


                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"
                        />
                      </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, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";

        class SelectPage extends Component {
          render() {
            return (
              <div>
                <MDBSelect multiple color="primary">
                  <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>
                <label>Example label</label>
              </div>
            );
          }
        }

        export default SelectPage;
      

        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</label>
              </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, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";
  
          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect multiple>
                    <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>
                  <label>Example label</label>
                </div>
              );
            }
          }
  
          export default SelectPage;
        

          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</label>
                </div>
              );
            }
          }
  
          export default SelectPage;
        

Option groups MDB Pro component

Separate groups of options using disabled option.


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

          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="Choose your option"
                  />
                  <label>Example label</label>
                </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, MDBSelectInput, MDBSelectOptions, MDBSelectOption } from "mdbreact";
  
          class SelectPage extends Component {
            render() {
              return (
                <div>
                  <MDBSelect multiple>
                    <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.jpg"
                        >
                          User nr 1
                        </MDBSelectOption>
                        <MDBSelectOption
                          value="example 2"
                          icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg"
                        >
                          User nr 2
                        </MDBSelectOption>
                        <MDBSelectOption
                          value="example 3"
                          icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg"
                        >
                          User nr 3
                        </MDBSelectOption>
                      </MDBSelectOptions>
                  </MDBSelect>
                  <label>Example label</label>
                </div>
              );
            }
          }
  
          export default SelectPage;
        

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

          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</label>
                </div>
              );
            }
          }
  
          export default SelectPage;
        

React Bootstrap 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 alternatively build an Array of object structured data.


      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;
    

      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;
    

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" Select wrapper classes. <MDBSelect className="my-custom-class">
color String Sets colorfull hover efect on select options. <MDBSelect color="primary">
mutliple 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} />
search Boolean false Works only with alternative Select! Search element will appear as the firs child of select. <MDBSelect search={true}>
searchLabel String Search Works only with alternative Select! Changes default label of additional search element. <MDBSelect searchLabel="Find option" />
searchId String selectSearchInput Works only with alternative Select! Changes default id of additional search element. <MDBSelect searchId="id" />
selected String Works only with alternative Select! Set default select text content. <MDBSelect selected="Choose option" >

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 >
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" }