Select Fields

Selects allow users to select from a menu. It functions as a wrapper around the browser's native select element.

They come in two types:

  • Filled select fields
  • Outlined select fields

We have used Bootstrap’s Dropdown component and .form-floating to create the Select fields.

Note that the <select> must come first so we can utilize a sibling selector (e.g., ~).

This component requires Javascript for initialization. Click to view Javascript.

Filled

html 
<div class="form-floating">
  <select class="form-select">
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Select One</label>
</div>
html 
<div class="form-floating">
  <select class="form-select" disabled>
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Disabled Select</label>
</div>

Outlined

html 
<div class="form-floating form-floating-outlined">
  <select class="form-select">
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Select One</label>
</div>
html 
<div class="form-floating form-floating-outlined">
  <select class="form-select" disabled>
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Disabled Select</label>
</div>

Color options

Make use of .base-[color] & .primary-[color] classes to personalize it according to your brand’s style.

html 
<div class="form-floating base-purple primary-pink">
  <select class="form-select">
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Select One</label>
</div>
html 
<div class="form-floating form-floating-outlined base-purple primary-pink">
  <select class="form-select">
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Select One</label>
</div>

Searchable

Add class searchable on .form-floating to add a search box to the menu.

html 
<div class="form-floating searchable">
  <select class="form-select">
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Searchable</label>
</div>
html 
<div class="form-floating form-floating-outlined searchable">
  <select class="form-select">
    <option value=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Searchable</label>
</div>

With Icon

html 
<div class="form-floating-with-icon">
  <div class="form-floating">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="prepend">
    <i class="bi bi-star-fill"></i>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="prepend">
    <i class="bi bi-star-fill"></i>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="append">
    <i class="bi bi-star-fill"></i>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="append">
    <i class="bi bi-star-fill"></i>
  </div>
</div>

With Spinner

html 
<div class="form-floating-with-icon">
  <div class="form-floating">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="prepend">
    <div class="spinner-material spinner-rainbow">
      <svg viewBox="25 25 50 50">
        <circle cx="50" cy="50" r="20" fill="none">
      </svg>
    </div>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="prepend">
    <div class="spinner-material text-blue">
      <svg viewBox="25 25 50 50">
        <circle cx="50" cy="50" r="20" fill="none">
      </svg>
    </div>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="append">
    <div class="spinner-border text-blue"></div>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined">
    <select class="form-select">
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select One</label>
  </div>
  <div class="append">
    <div class="spinner-grow text-primary"></div>
  </div>
</div>

Multi Select

Add class multi-select on .form-floating to enable multi select.

html 
<div class="form-floating multi-select">
  <select class="form-select" name="cars[]" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Select</label>
</div>
html 
<div class="form-floating form-floating-outlined multi-select">
  <select class="form-select" name="cars[]" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Select</label>
</div>

Multi Select Searchable

html 
<div class="form-floating multi-select searchable">
  <select class="form-select" name="cars[]" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Searchable</label>
</div>
html 
<div class="form-floating form-floating-outlined multi-select searchable">
  <select class="form-select" name="cars[]" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Searchable</label>
</div>

Multi Select With Icon

html 
<div class="form-floating-with-icon">
  <div class="form-floating multi-select">
    <select class="form-select" name="cars[]" multiple>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select</label>
  </div>
  <div class="prepend">
    <i class="bi bi-star-fill"></i>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined multi-select">
    <select class="form-select" name="cars[]" multiple>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select</label>
  </div>
  <div class="append">
    <i class="bi bi-star-fill"></i>
  </div>
</div>

Multi Select With Spinner

html 
<div class="form-floating-with-icon">
  <div class="form-floating multi-select">
    <select class="form-select" name="cars[]" multiple>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select</label>
  </div>
  <div class="prepend">
    <div class="spinner-material text-blue">
      <svg viewBox="25 25 50 50">
        <circle cx="50" cy="50" r="20" fill="none">
      </svg>
    </div>
  </div>
</div>
html 
<div class="form-floating-with-icon">
  <div class="form-floating form-floating-outlined multi-select">
    <select class="form-select" name="cars[]" multiple>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <label>Select</label>
  </div>
  <div class="append">
    <div class="spinner-grow text-primary"></div>
  </div>
</div>

Javascript

// Initialize
var selectList = [].slice.call(document.querySelectorAll('.form-select'))
var selectFields = selectList.map(function (select) {
  return new materialstyle.SelectField(select)
})

Change

If the value of a <select> is changed dynamically, change event must be triggered.

var select = document.getElementById('mySelect')
// Change value
select.value = 2;
// Trigger "change" event
select.dispatchEvent(new Event('change'))

Redraw

If a Select field is not visible at the time of initialization OR if it is within a container that is not visible by default, for example, Modal, Collapse, Offcanvas, redraw() function must be called on the instance when it becomes visible.

var myModal = document.getElementById('myModal')
myModal.addEventListener('shown.bs.modal', function (event) {
  // Redraw Select Field
  var selectFields = this.querySelectorAll('.form-select')
  for (const [, value] of Object.entries(selectFields)) {
    var selectFieldInstance = materialstyle.SelectField.getOrCreateInstance(value)
    selectFieldInstance.redraw()
  }
});

Rebuild

If options of a select field are changed after initialization, rebuild() function must be called on the instance.

// Rebuild Select Field
var selectFields = this.querySelectorAll('.form-select')
for (const [, value] of Object.entries(selectFields)) {
  var selectFieldInstance = materialstyle.SelectField.getOrCreateInstance(value)
  selectFieldInstance.rebuild()
}

With jQuery

// Initialize
$('.form-select').selectfield();


// Redraw Select fields
$('.form-select').selectfield('redraw');


// Rebuild Select fields
$('.form-select').selectfield('rebuild');


// Change select's value and trigger "change" event
$('#mySelect').val(2).trigger('change');
We are aware that the documentation is incomplete. While we work on it, You may refer to Bootstrap docs or help us by contributing.