Bootstrap Select

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

MDB provides you a variety of options and variations.


Basic example MDB Pro component

                
import React from 'react'
import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact'

class SelectPage extends React.Component {
  getSelectValue = (value) => {   
    console.log(value); 
  }

  render() {   
    return(       
      <Select getValue={this.getSelectValue}>         
        <SelectInput selected="Choose your option"></SelectInput>         
        <SelectOptions>           
          <SelectOption disabled>Choose your option</SelectOption>           
          <SelectOption>Option nr 1</SelectOption>           
          <SelectOption>Option nr 2</SelectOption>           
          <SelectOption>Option nr 3</SelectOption>         
        </SelectOptions>       
      </Select>       
      <label>Example label</label>   
    ); 
  }
};

export default SelectPage;
                
            

Color variations MDB Pro component

                
import React from 'react';
import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact';

class SelectPage extends React.Component {
  getSelectValue = (value) => {   
    console.log(value); 
  }
  
  render() {
    return(
      <!--Blue select-->       
      <Select getValue={this.getSelectValue} color="primary">         
        <SelectInput></SelectInput>         
        <SelectOptions>           
          <SelectOption disabled>Choose your option</SelectOption>           
          <SelectOption>Option nr 1</SelectOption>           
          <SelectOption>Option nr 2</SelectOption>           
          <SelectOption>Option nr 3</SelectOption>           
          <SelectOption>Option nr 4</SelectOption>           
          <SelectOption>Option nr 5</SelectOption>         
        </SelectOptions>       
      </Select>       
      <label>Blue select</label>       
      <!--/Blue select-->
    );
  }
};

export default SelectPage;
                
            

In order to change a select color use one of the following colors:

1. primary

2. danger

3. default

4. secondary

5. success

6. info

7. warning

8. ins

9. dark


Multiple select MDB Pro component

                
import React from 'react';
import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact';

class SelectPage extends React.Component {
  getSelectValue = (value) => {   
    console.log(value); 
  }

  render() {
    return(
      <Select getValue={this.getSelectValue} multiple>
        <SelectInput selected="Choose your option"></SelectInput>
        <SelectOptions>
          <SelectOption disabled>Choose your option</SelectOption>
          <SelectOption>Option nr 1</SelectOption>
          <SelectOption>Option nr 2</SelectOption>
          <SelectOption>Option nr 3</SelectOption>
          <SelectOption>Option nr 4</SelectOption>
          <SelectOption>Option nr 5</SelectOption>
        </SelectOptions>
      </Select>
      <label>Example label</label>
    );
  }
};

export default SelectPage;
                
            

Options groups MDB Pro component

                
import React from 'react';
import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact';

class SelectPage extends React.Component {
  getSelectValue = (value) => {   
    console.log(value); 
  }
  
  render() {
    return(
      <Select getValue={this.getSelectValue}>
        <SelectInput></SelectInput>
        <SelectOptions>
          <SelectOption disabled>team 1</SelectOption>
          <SelectOption>Option nr 1</SelectOption>
          <SelectOption>Option nr 2</SelectOption>
          <SelectOption disabled>team 2</SelectOption>
          <SelectOption>Option nr 3</SelectOption>
          <SelectOption>Option nr 4</SelectOption>
        </SelectOptions>
      </Select>
      <label>Example label</label>
    );
  }
};

export default SelectPage;
                
            

Select with icons MDB Pro component

                
import React from 'react';
import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact';

class SelectPage extends React.Component {
  getSelectValue = (value) => {   
    console.log(value); 
  }

  render() {
    return(
        <Select getValue={this.getSelectValue}>
          <SelectInput selected="Choose your option"></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg">Option nr 1</SelectOption>
            <SelectOption icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg">Option nr 2</SelectOption>
            <SelectOption icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg">Option nr 3</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
    );
  }
};

export default SelectPage;
                
            

Disabled select MDB Pro component

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

                
import React from 'react';
import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact';

class SelectPage extends React.Component {
  getSelectValue = (value) => {   
    console.log(value); 
  }
  
  render() {
    return(
        <!-- Disabled select-->
        <Select disabled>
          <SelectInput selected="Choose your option"></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption>Option nr 1</SelectOption>
            <SelectOption>Option nr 2</SelectOption>
            <SelectOption>Option nr 3</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>

        <!--Disabled option-->
        <Select getValue={this.getSelectValue}>
          <SelectInput selected="Choose your option"></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption disabled>Disabled option</SelectOption>
            <SelectOption>Option nr 2</SelectOption>
            <SelectOption>Option nr 3</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
    );
  }
};

export default SelectPage;
                
            

Default select

Default Select doesn't require an initialization. You only need to add a .browser-default class to the select element.

                
<label>Default Select</label>
<select className="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>