Rate this docs

React Bootstrap Select

React Select - Bootstrap 4 & Material Design.

Bootstrap material select 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

Default Select

Default styling for Bootstrap Select component


            import React, { Component } from 'react';

            class SelectPage extends Component {
              render () {
                return(
                  <div>
                    <select className="browser-default custom-select">
                      <option>Choose your option</option>
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                    </select>
                  </div>
                );
              }
            }

            export default SelectPage;
          

Material Select MDB Pro component

Material Design styling for Bootstrap Select component


            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 nr 1</MDBSelectOption>
                        <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
                        <MDBSelectOption value="3">Option nr 3</MDBSelectOption>
                      </MDBSelectOptions>
                    </MDBSelect>
                    <label>Material Select</label>
                  </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 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>Material Select</label>
              </div>
            );
          }
        }

        export default SelectPage;
      

Select Multiple MDB Pro component

Setting property multiple allows to select the list of options.


        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">Option nr 3</MDBSelectOption>
                  </MDBSelectOptions>
                </MDBSelect>
                <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" selected>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" selected>Option nr 5</MDBSelectOption>
                  </MDBSelectOptions>
                </MDBSelect>
                <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>
                  <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;
      

Select 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>
                  <MDBSelectInput selected="Choose your option" />
                  <MDBSelectOptions>
                      <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                      <MDBSelectOption
                        value="User nr 1"
                        icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg"
                      >
                        example 1
                      </MDBSelectOption>
                      <MDBSelectOption
                        value="User nr 2"
                        icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg"
                      >
                        example 2
                      </MDBSelectOption>
                      <MDBSelectOption
                        value="User nr 3"
                        icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg"
                      >
                        example 3
                      </MDBSelectOption>
                    </MDBSelectOptions>
                </MDBSelect>
                <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>
                  <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;
      

Altrenative source of data MDB Pro component

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


          import React, { Component } from "react";
          import {
            MDBSelect
          } from "mdbreact";
          
          class SelectPage extends Component {
            state = {
              options: [
                {
                  checked: false,
                  disabled: false,
                  icon: null,
                  value: "Option one"
                },
                {
                  checked: false,
                  disabled: false,
                  icon: null,
                  value: "Option two"
                },
                {
                  checked: true,
                  disabled: false,
                  icon: null,
                  value: "Option three"
                },
                {
                  checked: false,
                  disabled: false,
                  icon: null,
                  value: "Option four"
                }
              ]
            };

            render() {
              return (
                <div>
                  <MDBSelect
                    multiple
                    color="primary"
                    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 build an object of structured data, or use regular JSX/HTML 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" />
                      <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: "Option 1"
                    },
                    {
                    checked: false,
                    disabled: false,
                    icon: null,
                    value: "Option 2"
                    },
                    {
                    checked: false,
                    disabled: false,
                    icon: null,
                    value: "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: Properties and Options

All properties and options refered to 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}>
search Boolean false Search options inside select. Search element will appear as the firs child of select. <MDBSelect search={true}>
selected Boolean false Set inside option. Preselects otpions while component mounts. <MDBSelectOption selected={true}>
checked Boolean false Predefined inside options object. While true - the option will be selected. <{checked: false}>
disabled Boolean false Set inside option or predefined inside options object. While true - the option wont be clickable. <MDBSelectOption disabled={false}>
icon String Set inside option or predefined inside options object. Inserts icon into select option. <MDBSelectOption icon="icon_url">
value String Set inside option or predefined inside options object. Set option value. <MDBSelectOption value="option 1">

API Reference: Methods

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