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 {
  constructor(props) {
    super(props);
    this.state = {
      value: "Choose your option",
    }
    this.optionClick = this.optionClick.bind(this);

    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

  render() {
    return(
        <Select>
          <SelectInput value={this.state.value}></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 1</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 3</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
    );
  }
};
                
            

Color variations MDB Pro component

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

class SelectPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value3: "Choose your option"
    }
    this.optionClick3 = this.optionClick3.bind(this);

    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick3(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value3: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

  render() {
    return(
        <!--Blue select-->
        <Select color="primary">
          <SelectInput value={this.state.value3}></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick3}>Option nr 1</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick3}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick3}>Option nr 3</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick3}>Option nr 4</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick3}>Option nr 5</SelectOption>
          </SelectOptions>
        </Select>
        <label>Blue select</label>
        <!--/Blue select-->
    );
  }
};
                
            

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 {
  constructor(props) {
    super(props);
    this.state = {
      value2: "Choose your option"
    }
    this.optionClick2 = this.optionClick2.bind(this);

    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick2(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value2: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

  render() {
    return(
        <Select multiple>
          <SelectInput value={this.state.value2}></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick2}>Option nr 1</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick2}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick2}>Option nr 3</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick2}>Option nr 4</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick2}>Option nr 5</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
    );
  }
};
                
            

Options groups MDB Pro component

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

class SelectPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value5: "Choose your option"
    }
    this.optionClick5 = this.optionClick5.bind(this);

    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick5(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value5: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

  render() {
    return(
        <Select>
          <SelectInput value={this.state.value5}></SelectInput>
          <SelectOptions>
              <SelectOption disabled>team 1</SelectOption>
              <SelectOption triggerOptionClick={this.optionClick5}>Option nr 1</SelectOption>
              <SelectOption triggerOptionClick={this.optionClick5}>Option nr 2</SelectOption>
              <SelectOption disabled>team 2</SelectOption>
              <SelectOption triggerOptionClick={this.optionClick5}>Option nr 3</SelectOption>
              <SelectOption triggerOptionClick={this.optionClick5}>Option nr 4</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
    );
  }
};
                
            

Select with icons MDB Pro component

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

class SelectPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value4: "Choose your option"
    }
    this.optionClick4 = this.optionClick4.bind(this);

    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick4(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value4: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

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

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 {
  constructor(props) {
    super(props);
    this.state = {
      value: "Choose your option"
    }
    this.optionClick = this.optionClick.bind(this);

    this.onClick = this.onClick.bind(this);
    this.otherDropdownsClose = this.otherDropdownsClose.bind(this);
  }

  optionClick(value) {
    if (value.constructor === Array) {
      value = value.join(', ');
    }
    this.setState({value: value});
  }

  onClick(e) {
    // check if select is multiple
    if (e.target.dataset.multiple === 'true') {
      return;
    }

    if (e.target.classList.contains('select-dropdown')) {
      this.otherDropdownsClose();
      if (e.target.nextElementSibling) {
        e.target.nextElementSibling.classList.add('fadeIn');
      }
    } else {
      this.otherDropdownsClose();
    }
  }

  otherDropdownsClose() {
    let dropdowns = document.querySelectorAll('.dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains('fadeIn')) {
        dropdowns[i].classList.remove('fadeIn');
      }
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.onClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClick);
  }

  render() {
    return(
        <!-- Disabled select-->
        <Select disabled>
          <SelectInput value={this.state.value}></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 1</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 3</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>

        <!--Disabled option-->
        <Select>
          <SelectInput value={this.state.value}></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption disabled triggerOptionClick={this.optionClick}>Disabled option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 3</SelectOption>
          </SelectOptions>
        </Select>
        <label>Example label</label>
    );
  }
};
                
            

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>