Select Content - Materialize

Select allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields. Remember that this is a jQuery plugin so make sure you initialize this in your document ready.

Choose your optionOption 1Option 2Option 3Materialize Select

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

Choose your optionOption 1Option 2Option 3Materialize Multiple Select

We also support optgroups in our selects.

Option 1Option 2Option 3Option 4Optgroups

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.

Choose your optionexample 1example 2example 3Images in select

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

Browser SelectChoose your optionOption 1Option 2Option 3

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

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

  <div class="input-field col s12">
    <select>
      <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>Optgroups</label>
  </div>

  <div class="input-field col s12 m6">
    <select 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>Images in select</label>
  </div>
  <div class="input-field col s12 m6">
    <select 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>Images in select</label>
  </div>

  <label>Browser Select</label>
  <select 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 for any dynamically generated select elements your page generates.

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

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });

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

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:
var instance = M.FormSelect.getInstance(elem);

/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.

$('select').formSelect('methodName');
$('select').formSelect('methodName', paramName);
*/

.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.
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.

Choose your optionOption 1Option 2Option 3Materialize Disabled

Browser DisabledChoose your optionOption 1Option 2Option 3

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

  <label>Browser Disabled</label>
  <select 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>