Select

Custom material select#

Create a custom material design select using the .form-custom-select class on the <select> tag.

<form class="form-material">
  <div class="form-field">
    <label for="custom-select">Select an option</label>
    <select
      class="form-control form-custom-select white shadow-1"
      data-ax="select"
      id="custom-select"
    >
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

Simple material select#

Create a select by adding the .form-control class on it.
The .disabled class or attribute works on the select too.

<form class="form-material">
  <div class="form-field">
    <label for="select">Select an option</label>
    <select class="form-control rounded-1" id="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</form>

Multiple select#

Use the multiple attribute on the <select> tag to get enable the possibility to select multiple options of your material select.

<form class="form-material">
  <div class="form-field">
    <select
      class="form-control form-custom-select white shadow-1"
      data-ax="select"
      id="custom-select-multiple"
      multiple
    >
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

Basic select#

Without the material-form class set, the select design becomes classic and gets a shadow once focused.

<form>
  <div class="form-field">
    <label class="text-center" for="select">Select an option</label>
    <select class="form-control rounded-1" id="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
  <div class="form-field">
    <label class="text-center" for="select">Select disabled</label>
    <select class="form-control rounded-1" disabled id="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</form>

Basic multiple select#

Creating a multiple select is really simple, you just have to add the multiple attribute on the select element.

<form>
  <div class="form-field">
    <label class="text-center" for="select">Choose one or more option</label>
    <select class="form-control rounded-1" multiple id="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
  </div>
</form>

Custom select options#

Option Description
inputClasses Set the input classes

Common methods & styling#

For all the common methods and styling properties, please refer to the Material forms page.