Font and theme export

Select

Choose one or more values from a dropdown, with groups and optional images.

Basic example

Select allows user input through specified options. Make sure you wrap it in a .input-field.outlined for a notched label and centered value, with proper alignment with other text fields.

Dropdown menus share the Material 3 Expressive appearance: rounded surfaces, tertiary selection colors, and an inset focus indicator for arrow-key navigation. Single and multiple selection use the same menu styling in light and dark themes.

<div class="input-field outlined">
  <select id="select-example-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="select-example-1">Materialize Select</label>
</div>

Setup

Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.

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() {
    const elems = document.querySelectorAll('select');
    const instances = FormSelect.init(elems, {
      // specify options here
    });
  });

Examples and variants

Multiple selection, groups, and images

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 outlined">
  <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 outlined">
  <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 outlined">
  <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 outlined">
  <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 outlined">
  <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>

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 outlined">
  <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>

Validation

Keep required on the original select. Use an empty option for the unselected state, and keep the message connected with aria-describedby. The wrapper supplies the same error treatment as text fields.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

Required selection
Choose a department. 
<div class="input-field outlined error">
    <select id="validation-select" name="department" required aria-invalid="true" aria-describedby="validation-select-error">
        <option value="" selected disabled></option>
        <option value="design">Design</option>
        <option value="production">Production</option>
    </select>
    <label for="validation-select">Department</label>
    <span id="validation-select-error" class="supporting-text"><i class="material-icons" aria-hidden="true">error</i> Choose a department.</span>
</div>

Reference

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.
selected Array [] Default options to be selected on initialization

Methods

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


                  const instance = 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.