Select

Materialize is a modern responsive CSS framework based on Material Design by Google.

Select allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields.

You can add the property multiple to get the multiple select and select several options.

We also support optgroups in our selects.

You can add icons to your options in any type of select. In the option you add the image source with the data-icon attribute.

You can add the class browser-default to get the browser default. 


  <div class="input-field col s12">
    <select id="form-select-1">
      <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>
    <label for="form-select-1">Materialize Select</label>
  </div>

  <div class="input-field col s12">
    <select id="form-select-2" multiple>
      <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>
    <label for="form-select-2">Materialize Multiple Select</label>
  </div>

  <div class="input-field col s12">
    <select id="form-select-3">
      <optgroup label="team 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </optgroup>
      <optgroup label="team 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
      </optgroup>
    </select>
    <label for="form-select-3">Optgroups</label>
  </div>

  <div class="input-field col s12 m6">
    <select id="form-select-4" class="icons">
      <option value="" disabled selected>Choose your option</option>
      <option value="" data-icon="images/sample-1.jpg">example 1</option>
      <option value="" data-icon="images/office.jpg">example 2</option>
      <option value="" data-icon="images/yuna.jpg">example 3</option>
    </select>
    <label for="form-select-4">Images in select</label>
  </div>
  <div class="input-field col s12 m6">
    <select id="form-select-5" class="icons">
      <option value="" disabled selected>Choose your option</option>
      <option value="" data-icon="images/sample-1.jpg" class="left">example 1</option>
      <option value="" data-icon="images/office.jpg" class="left">example 2</option>
      <option value="" data-icon="images/yuna.jpg" class="left">example 3</option>
    </select>
    <label for="form-select-5">Images in select</label>
  </div>

  <label for="form-select-6">Browser Select</label>
  <select id="form-select-6" class="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>

Initialization

You must initialize the select element as shown below. In addition, you will need a separate call to init() for any dynamically generated select or any changes to an existing select. 


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, {
      // specify options here
    });
  });

Options

Name Type Default Description
classes String '' Classes to be added to the select wrapper element.
dropdownOptions Object {} Pass options object to select dropdown initialization.

Methods

All the methods are called on the plugin instance. You can get the plugin instance like this: 


  var instance = M.FormSelect.getInstance(elem);
.getSelectedValues();

Get selected values in an array.

Return Value

Array: Array of selected values.


instance.getSelectedValues();
.destroy();

Destroy plugin instance and teardown


instance.destroy();

Properties

Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.
isMultiple Boolean If this is a multiple select.
wrapper Element The select wrapper element.
dropdownOptions Element Dropdown UL element.
labelEl Element Label associated with the current select element. Is "null", if not detected.
input Element Text input that shows current selected option.
dropdown Dropdown Instance of the dropdown plugin for this select.

Disabled Styles

You can also add disabled to the select element to make the whole thing disabled. Or if you add disabled to the options, the individual options will be unselectable. 


  <div class="input-field">
    <select id="form-select-7" disabled>
      <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>
    <label for="form-select-7">Materialize Disabled</label>
  </div>

  <label for="form-select-8">Browser Disabled</label>
  <select id="form-select-8" class="browser-default" disabled>
    <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>