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
<div class="form-floating">
<select class="form-select">
<option value="" label="blank option"></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="form-floating">
<select class="form-select" disabled>
<option value="" label="blank option"></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
<div class="form-floating form-floating-outlined">
<select class="form-select">
<option value="" label="blank option"></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="form-floating form-floating-outlined">
<select class="form-select" disabled>
<option value="" label="blank option"></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 --bs-form-field-border-color & --bs-form-field-active-border-color css variables to personalize it according to your brand’s style.
Classes .base-[color] & .primary-[color] are depricated in v3.1.1
<div class="form-floating" style="--bs-form-field-border-color: var(--bs-primary-hover); --bs-form-field-active-border-color: var(--bs-tertiary-hover);">
<select class="form-select">
<option value="" label="blank option"></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="form-floating form-floating-outlined" style="--bs-form-field-border-color: var(--bs-primary-hover); --bs-form-field-active-border-color: var(--bs-tertiary-hover);">
<select class="form-select">
<option value="" label="blank option"></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.
<div class="form-floating searchable">
<select class="form-select">
<option value="" label="blank option"></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><div class="form-floating form-floating-outlined searchable">
<select class="form-select">
<option value="" label="blank option"></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
<div class="form-floating-with-icon">
<div class="form-floating">
<select class="form-select">
<option value="" label="blank option"></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><div class="form-floating-with-icon">
<div class="form-floating form-floating-outlined">
<select class="form-select">
<option value="" label="blank option"></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><div class="form-floating-with-icon">
<div class="form-floating">
<select class="form-select">
<option value="" label="blank option"></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><div class="form-floating-with-icon">
<div class="form-floating form-floating-outlined">
<select class="form-select">
<option value="" label="blank option"></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
<div class="form-floating-with-icon">
<div class="form-floating">
<select class="form-select">
<option value="" label="blank option"></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><div class="form-floating-with-icon">
<div class="form-floating form-floating-outlined">
<select class="form-select">
<option value="" label="blank option"></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-primary">
<svg viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
</div>
</div>
</div><div class="form-floating-with-icon">
<div class="form-floating">
<select class="form-select">
<option value="" label="blank option"></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-tertiary"></div>
</div>
</div><div class="form-floating-with-icon">
<div class="form-floating form-floating-outlined">
<select class="form-select">
<option value="" label="blank option"></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-success"></div>
</div>
</div>
Multi Select
Add class multi-select on .form-floating and multiple attribute on the <select> to enable multi select.
<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 Multiple</label>
</div><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 Multiple</label>
</div>Multi Select Searchable
<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><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
<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 Multiple</label>
</div>
<div class="prepend">
<i class="bi bi-star-fill"></i>
</div>
</div><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 Multiple</label>
</div>
<div class="append">
<i class="bi bi-star-fill"></i>
</div>
</div>Multi Select With Spinner
<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 Multiple</label>
</div>
<div class="prepend">
<div class="spinner-material text-primary">
<svg viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
</div>
</div>
</div><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 Multiple</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');
