Select
Bootstrap 5 Select component
Select fields components are used for collecting user provided information from a list of options.
*
*
UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB
method.
Basic example
Basic example of select component that allows you to choose from a number of options.
<select data-mdb-select-init>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Multiselect
Add multiple
attribute to the select element to activate multiple mode.
<select data-mdb-select-init multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
<label class="form-label select-label">Example label</label>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Select with label
It is possible to add select label by creating element with
.form-label
and .select-label
classes.
<select data-mdb-select-init>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<label class="form-label select-label">Example label</label>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Select with placeholder
Use placeholder
option to set placeholder for select input. The placeholder will
be displayed when input is focused and no option is selected.
<select data-mdb-select-init data-mdb-placeholder="Example placeholder" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Disabled select
Add disabled
attribute to the select element to disable select input.
<select data-mdb-select-init disabled>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Disabled options
Use disabled
attribute on option element to disable specific option.
<select data-mdb-select-init>
<option value="1">One</option>
<option value="2" disabled>Two</option>
<option value="3" disabled>Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Custom content
A custom content container with a class .select-custom-content
will be displayed
at the end of the select dropdown.
<select data-mdb-select-init>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div class="select-custom-content">
<button class="btn-save btn btn-primary btn-sm" data-mdb-ripple-init>Save</button>
</div>
// Initialization for ES Users
import { Ripple, Select, initMDB } from "mdb-ui-kit";
initMDB({ Ripple, Select });
Visible options
Use visibleOptions
option to change the number of options that will be displayed
in the select dropdown without scrolling.
<select data-mdb-select-init data-mdb-visible-options="3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Secondary text
Add secondary-text
data attribute to the specific options to display secondary
text.
<select data-mdb-select-init data-mdb-option-height="44">
<option value="1" data-mdb-secondary-text="Secondary text">One</option>
<option value="2" data-mdb-secondary-text="Secondary text">Two</option>
<option value="3" data-mdb-secondary-text="Secondary text">Three</option>
<option value="4" data-mdb-secondary-text="Secondary text">Four</option>
<option value="5" data-mdb-secondary-text="Secondary text">Five</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Search
Set filter
option to true
to enable options filtering.
<select data-mdb-select-init data-mdb-filter="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Select with search inside a modal
Due to a focus trap in modals, it is not possible to focus the outer elements (like select
dropdown). You can use select data-mdb-container
option to resolve this problem.
The data-mdb-container
accepts selector of the element inside of wich select
dropdown will be rendered. In this case, the selector should point to the modal container (the
element with class .modal
). It is important to use a unique selector to assign
select to a specific modal.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal" data-mdb-ripple-init>
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<select data-mdb-select-init data-mdb-container="#exampleModal" data-mdb-filter="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init data-mdb-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>
</div>
</form>
</div>
</div>
</div>
// Initialization for ES Users
import { Modal, Ripple, Select, initMDB } from "mdb-ui-kit";
initMDB({ Modal, Ripple, Select });
Option groups
It is possible to group options by using optgroup
element.
<select data-mdb-select-init>
<optgroup label="Label 1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Label 2">
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</optgroup>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Select with icons
Add icon
data attribute to the specific options to display the option icon.
<select data-mdb-select-init>
<option value="1" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp">One</option>
<option value="2" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp">Two</option>
<option value="3" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp">Three</option>
<option value="4" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp">Four</option>
<option value="5" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp">Five</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Validation
Set validation
option to true
to enable component validation. The
validFeedback
and invalidFeedback
options allow to modify the
validation messages.
<form class="needs-validation" novalidate>
<select
data-mdb-select-init
id="select-with-validation"
data-mdb-validation="true"
data-mdb-valid-feedback="This value is valid"
data-mdb-invalid-feedback="This value is invalid"
data-mdb-clear-button="true"
>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
<button type="submit" id="submit" class="btn btn-primary btn-sm mt-3" data-mdb-ripple-init>
Submit
</button>
</form>
import { Ripple, Select, initMDB } from "mdb-ui-kit";
initMDB({ Ripple, Select });
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
event.preventDefault();
event.stopPropagation();
form.classList.add('was-validated');
},false);
});
})();
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
event.preventDefault();
event.stopPropagation();
form.classList.add('was-validated');
},false);
});
})();
Set value
The setValue
method allows to programatically set the component selections.
Single selection
Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.
<select id="singleSelection" data-mdb-select-init>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
const singleSelect = document.querySelector('#singleSelection');
const singleSelectInstance = Select.getInstance(singleSelect);
singleSelectInstance.setValue('4');
const singleSelect = document.querySelector('#singleSelection');
const singleSelectInstance = mdb.Select.getInstance(singleSelect);
singleSelectInstance.setValue('4');
Multi selection
Add array of string values to the arguments list to correctly select option with corresponding value in multi selection mode.
<select id="multiSelection" data-mdb-select-init multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
const multiSelect = document.querySelector('#multiSelection');
const multiSelectInstance = Select.getInstance(multiSelect);
multiSelectInstance.setValue(['3', '4', '5']);
const multiSelect = document.querySelector('#multiSelection');
const multiSelectInstance = mdb.Select.getInstance(multiSelect);
multiSelectInstance.setValue(['3', '4', '5']);
Select with toggle element
If you want to toggle Select via button, you have to add data-mdb-toggle
attribute to this button with
ID
of the Select element.
<select data-mdb-select-init id="mySelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<button id="toggleMySelect" class="btn btn-primary" data-mdb-ripple-init data-mdb-toggle="mySelect">
Toggle Select
</button>
// Initialization for ES Users
import { Ripple, Select, initMDB } from "mdb-ui-kit";
initMDB({ Ripple, Select });
const selectEl = document.getElementById('mySelect')
const select = Select.getInstance(selectEl)
document.getElementById("toggleMySelect").onclick = function () {
select.open()
};
const selectEl = document.getElementById('mySelect')
const select = mdb.Select.getInstance(selectEl)
document.getElementById("toggleMySelect").onclick = function () {
select.open()
};
Auto select
Set autoSelect
option to true
to enable selecting on Tab press.
<select
data-mdb-select-init
data-mdb-auto-select="true"
>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Select with CSS classes
In order to use select with additional CSS classes you need to place it in the div
wrapper and use CSS classes on that
div. In case you use display classes like .d-lg-none
and select is not visible on page load you need to use code from this example to update label width when select became visible.
<div class="shadow-5">
<select data-mdb-select-init>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
<label class="form-label select-label">Example label</label>
</div>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
Select - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES
format, you must
first import the component and then initialize it with the initMDB
method. If you are going to use the UMD
format,
just import the mdb-ui-kit
package.
import { Select, initMDB } from "mdb-ui-kit";
initMDB({ Select });
import "mdb-ui-kit"
Usage
Via data attributes
Using the Select component doesn't require any additional JavaScript code - simply add
data-mdb-select-init
attribute to
select
tag
and use other data attributes to set all options.
For ES
format, you must first import and call the initMDB
method.
<select data-mdb-select-init>
<option value="1">One</option>s
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Via JavaScript
const mySelect = new Select(document.getElementById('mySelect'), options);
const mySelect = new mdb.Select(document.getElementById('mySelect'), options);
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-container="body"
.
Name | Type | Default | Description |
---|---|---|---|
autoSelect
|
Boolean | false |
Enables auto selecting on Tab press |
container
|
String | 'body' |
Container for the select dropdown. Accepts an element selector inside of which select dropdown will be rendered. |
clearButton
|
Boolean | false |
Adds clear button to the select input |
disabled
|
Boolean | false |
Changes select input state to disabled |
displayedLabels
|
Number | 5 |
The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off. |
filter
|
Boolean | false |
Displays filter input that allow to search for specific option |
filterFn
|
Function | null | null |
Enable customization of the filtering function in the select element with search |
filterDebounce
|
Number | 300 |
Adds delay to the options list updates when using filter input. Improves performance of the select with filter. |
invalidFeedback
|
String | 'Invalid' |
The text which is displayed below the Material Select when the validate option is enabled and the select is invalid |
noResultText
|
String | 'No results' |
The text that will be displayed when no option is found after using select filter |
placeholder
|
String | '' |
The text that will be displayed as select input placeholder |
size
|
String | 'default' |
Changes input size. Available options: 'sm', 'lg', 'default'. |
optionsSelectedLabel
|
String | 'options selected' |
The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected |
optionHeight
|
Number | 38 |
Height of the select option. Used to determine dropdown height and number of visible options. |
selectAll
|
Boolean | true |
Displays select all option in multiselect dropdown |
selectAllLabel
|
String | 'Select all' |
Changes label of select all option. |
searchPlaceholder
|
String | 'Search...' |
Changes placeholder of the select search input. |
validation
|
Boolean | false |
Adds required validation to the component. |
validFeedback
|
String | 'Valid' |
The text which is displayed below the Material Select when the validate option is enabled and the select is valid. |
visibleOptions
|
Number | 5 |
The maximum number of options which are visible in the select dropdown without scrolling. |
Methods
Name | Description | Example |
---|---|---|
open |
Manually opens a select |
mySelect.open()
|
close |
Manually closes a select |
mySelect.close()
|
setValue
|
Programatically set component selections. Add single value for default select and array of values for multiselect. |
mySelect.setValue('3')
|
dispose
|
Disposes a select instance |
mySelect.dispose()
|
getInstance
|
Static method which allows you to get the select instance associated to a DOM element. |
Select.getInstance(selectEl)
|
getOrCreateInstance
|
Static method which returns the select instance associated to a DOM element or create a new one in case it wasn't initialized. |
Select.getOrCreateInstance(selectEl)
|
const selectEl = document.getElementById('mySelect');
const select = new Select(selectEl);
select.open();
const selectEl = document.getElementById('mySelect');
const select = new mdb.Select(selectEl);
select.open();
Events
Name | Description |
---|---|
open.mdb.select
|
This event fires before the select is opened. |
opened.mdb.select
|
This event fires after the select dropdown is opened. |
close.mdb.select
|
This event fires before the select is closed. |
closed.mdb.select
|
This event fires after the select dropdown is closed. |
search.mdb.select
|
This event fires on input in search field. Information about the searched term can
be accessed through the following property of the emitted event: e.value .
|
valueChanged.mdb.select
|
This event fires after the select value changes. |
optionSelected.mdb.select
|
This event fires after the select option is selected. |
optionDeselected.mdb.select
|
This event fires after the select option is deselected. |
const mySelect = document.getElementById('mySelect')
mySelect.addEventListener('open.mdb.select', (e) => {
// do something...
})
CSS variables
As part of MDB’s evolving CSS variables approach, select now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Select CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.
// .select-wrapper
--#{$prefix}form-outline-select-arrow-color: #{$form-outline-select-arrow-color};
--#{$prefix}form-outline-select-arrow-font-size: #{$form-outline-select-arrow-font-size};
--#{$prefix}form-outline-select-arrow-top: #{$form-outline-select-arrow-top};
--#{$prefix}form-outline-select-arrow-right: #{$form-outline-select-arrow-right};
--#{$prefix}form-outline-select-valid-color: #{$form-outline-select-valid-color};
--#{$prefix}form-outline-select-invalid-color: #{$form-outline-select-invalid-color};
--#{$prefix}form-outline-select-clear-btn-color: #{$form-outline-select-clear-btn-color};
--#{$prefix}form-outline-select-clear-btn-font-size: #{$form-outline-select-clear-btn-font-size};
--#{$prefix}form-outline-select-clear-btn-top: #{$form-outline-select-clear-btn-top};
--#{$prefix}form-outline-select-clear-btn-right: #{$form-outline-select-clear-btn-right};
--#{$prefix}form-outline-select-clear-btn-focus-color: #{$form-outline-select-clear-btn-focus-color};
--#{$prefix}form-outline-select-sm-clear-btn-font-size: #{$form-outline-select-sm-clear-btn-font-size};
--#{$prefix}form-outline-select-sm-clear-btn-top: #{$form-outline-select-sm-clear-btn-top};
--#{$prefix}form-outline-select-lg-clear-btn-top: #{$form-outline-select-lg-clear-btn-top};
--#{$prefix}form-outline-select-label-max-width: #{$form-outline-select-label-max-width};
--#{$prefix}form-outline-select-label-active-transform: #{$form-outline-select-label-active-transform};
--#{$prefix}form-outline-select-lg-label-active-transform: #{$form-outline-select-lg-label-active-transform};
--#{$prefix}form-outline-select-sm-label-active-transform: #{$form-outline-select-sm-label-active-transform};
--#{$prefix}form-outline-select-input-focused-color: #{$form-outline-select-input-focused-color};
--#{$prefix}form-outline-select-label-color: #{$form-outline-select-label-color};
--#{$prefix}form-outline-select-notch-border-color: #{$form-outline-select-notch-border-color};
--#{$prefix}form-outline-select-white-notch-border-color: #{$form-outline-select-white-notch-border-color};
--#{$prefix}form-outline-select-input-focused-arrow-color: #{$form-outline-select-input-focused-arrow-color};
--#{$prefix}form-outline-select-white-focus-arrow-color: #{$form-outline-select-white-focus-arrow-color};
--#{$prefix}form-outline-select-white-arrow-color: #{$form-outline-select-white-arrow-color};
--#{$prefix}form-outline-select-white-clear-btn: #{$form-outline-select-white-clear-btn};
--#{$prefix}form-outline-select-sm-arrow-top: #{$form-outline-select-sm-arrow-top};
--#{$prefix}form-outline-select-lg-arrow-top: #{$form-outline-select-lg-arrow-top};
--#{$prefix}form-outline-form-notch-border-top: #{$form-outline-form-notch-border-top};
// .select-dropdown-container
--#{$prefix}form-outline-select-dropdown-container-z-index: #{$form-outline-select-dropdown-container-z-index};
--#{$prefix}form-outline-select-dropdown-bg: #{$form-outline-select-dropdown-bg};
--#{$prefix}form-outline-select-dropdown-box-shadow: #{$form-outline-select-dropdown-box-shadow};
--#{$prefix}form-outline-select-dropdown-min-width: #{$form-outline-select-dropdown-min-width};
--#{$prefix}form-outline-select-dropdown-transform: #{$form-outline-select-dropdown-transform};
--#{$prefix}form-outline-select-dropdown-transition: #{$form-outline-select-dropdown-transition};
--#{$prefix}form-outline-select-dropdown-open-transform: #{$form-outline-select-dropdown-open-transform};
--#{$prefix}form-outline-select-dropdown-input-group-padding: #{$form-outline-select-dropdown-input-group-padding};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-width: #{$form-outline-select-options-wrapper-scrollbar-width};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-height: #{$form-outline-select-options-wrapper-scrollbar-height};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-border-bottom-right-radius: #{$form-outline-select-options-wrapper-scrollbar-border-bottom-right-radius};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-border-bottom-left-radius: #{$form-outline-select-options-wrapper-scrollbar-border-bottom-left-radius};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-thumb-height: #{$form-outline-select-options-wrapper-scrollbar-thumb-height};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-thumb-bg: #{$form-outline-select-options-wrapper-scrollbar-thumb-bg};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-thumb-border-radius: #{$form-outline-select-options-wrapper-scrollbar-thumb-border-radius};
--#{$prefix}form-outline-select-no-results-padding-left: #{$form-outline-select-no-results-padding-left};
--#{$prefix}form-outline-select-no-results-padding-right: #{$form-outline-select-no-results-padding-right};
// .select-option-group-label
--#{$prefix}form-outline-select-option-group-label-padding-left: #{$form-outline-select-option-group-label-padding-left};
--#{$prefix}form-outline-select-option-group-label-padding-right: #{$form-outline-select-option-group-label-padding-right};
--#{$prefix}form-outline-select-option-group-label-font-size: #{$form-outline-select-option-group-label-font-size};
--#{$prefix}form-outline-select-option-group-label-font-weight: #{$form-outline-select-option-group-label-font-weight};
--#{$prefix}form-outline-select-option-group-label-color: #{$form-outline-select-option-group-label-color};
// .select-option-group > .select-option
--#{$prefix}form-outline-select-option-group-select-option-padding-left: #{$form-outline-select-option-group-select-option-padding-left};
// .select-option
--#{$prefix}form-outline-select-option-color: #{$form-outline-select-option-color};
--#{$prefix}form-outline-select-option-padding-left: #{$form-outline-select-option-padding-left};
--#{$prefix}form-outline-select-option-padding-right: #{$form-outline-select-option-padding-right};
--#{$prefix}form-outline-select-option-font-size: #{$form-outline-select-option-font-size};
--#{$prefix}form-outline-select-option-font-weight: #{$form-outline-select-option-font-weight};
--#{$prefix}form-outline-select-option-hover-not-disabled-bg: #{$form-outline-select-option-hover-not-disabled-bg};
--#{$prefix}form-outline-select-option-active-bg: #{$form-outline-select-option-active-bg};
--#{$prefix}form-outline-select-option-selected-active-bg: #{$form-outline-select-option-selected-active-bg};
--#{$prefix}form-outline-select-option-selected-disabled-color: #{$form-outline-select-option-selected-disabled-color};
--#{$prefix}form-outline-select-option-disabled-color: #{$form-outline-select-option-disabled-color};
--#{$prefix}form-outline-select-option-text-form-check-input-margin-right: #{$form-outline-select-option-text-form-check-input-margin-right};
--#{$prefix}form-outline-select-option-secondary-text-font-size: #{$form-outline-select-option-secondary-text-font-size};
--#{$prefix}form-outline-select-option-secondary-text-color: #{$form-outline-select-option-secondary-text-color};
--#{$prefix}form-outline-select-option-icon-width: #{$form-outline-select-option-icon-width};
--#{$prefix}form-outline-select-option-icon-height: #{$form-outline-select-option-icon-height};
--#{$prefix}form-outline-select-white-arrow: #{$form-outline-select-white-arrow};
--#{$prefix}form-outline-select-option-disabled-secondary-text-color: #{$form-outline-select-option-disabled-secondary-text-color};
--#{$prefix}form-outline-select-option-selected-bg: #{$form-outline-select-option-selected-bg};
--#{$prefix}form-outline-select-option-selected-hover-bg: #{$form-outline-select-option-selected-hover-bg};
SCSS variables
$form-outline-select-arrow-color: var(--#{$prefix}surface-color);
$form-outline-select-arrow-font-size: 16px;
$form-outline-select-arrow-top: 7px;
$form-outline-select-arrow-right: 16px;
$form-outline-select-valid-color: #00b74a;
$form-outline-select-invalid-color: #f93154;
$form-outline-select-clear-btn-color: var(--#{$prefix}surface-color);
$form-outline-select-clear-btn-font-size: 1rem;
$form-outline-select-clear-btn-top: 7px;
$form-outline-select-clear-btn-right: 27px;
$form-outline-select-clear-btn-focus-color: $primary;
$form-outline-select-sm-clear-btn-font-size: 0.8rem;
$form-outline-select-sm-clear-btn-top: 4px;
$form-outline-select-lg-clear-btn-top: 11px;
$form-outline-select-dropdown-container-z-index: $popconfirm-backdrop-zindex;
$form-outline-select-dropdown-bg: var(--#{$prefix}surface-bg);
$form-outline-select-dropdown-box-shadow: 0 2px 5px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16), 0 2px 10px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.12);
$form-outline-select-dropdown-min-width: 100px;
$form-outline-select-dropdown-transform: scaleY(0.8);
$form-outline-select-dropdown-transition: all 0.2s;
$form-outline-select-dropdown-open-transform: scaleY(1);
$form-outline-select-dropdown-input-group-padding: 10px;
$form-outline-select-label-max-width: 80%;
$form-outline-select-label-active-transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
$form-outline-select-lg-label-active-transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
$form-outline-select-sm-label-active-transform: translateY(-0.83rem) translateY(0.1rem) scale(0.8);
$form-outline-select-input-focused-color: var(--#{$prefix}surface-color);
$form-outline-select-label-color: $primary;
$form-outline-form-notch-border-top: 1px solid transparent;
$form-outline-select-notch-border-width: 2px;
$form-outline-select-notch-border-color: $primary;
$form-outline-select-white-notch-border-color: #fff;
$form-outline-select-notch-transition: all 0.2s linear;
$form-outline-select-input-focused-arrow-color: $primary;
$form-outline-select-white-focus-arrow-color: #fff;
$form-outline-select-white-arrow-color: #fff;
$form-outline-select-white-clear-btn: #fff;
$form-outline-select-sm-arrow-top: 3px;
$form-outline-select-lg-arrow-top: 11px;
$form-outline-select-options-wrapper-scrollbar-width: 4px;
$form-outline-select-options-wrapper-scrollbar-height: 4px;
$form-outline-select-options-wrapper-scrollbar-border-bottom-right-radius: 4px;
$form-outline-select-options-wrapper-scrollbar-border-bottom-left-radius: 4px;
$form-outline-select-options-wrapper-scrollbar-thumb-height: 50px;
$form-outline-select-options-wrapper-scrollbar-thumb-bg: var(--#{$prefix}scrollbar-thumb-bg);
$form-outline-select-options-wrapper-scrollbar-thumb-border-radius: 4px;
$form-outline-select-option-group-label-padding-left: 16px;
$form-outline-select-option-group-label-padding-right: 16px;
$form-outline-select-option-group-label-font-size: 1rem;
$form-outline-select-option-group-label-font-weight: 400;
$form-outline-select-option-group-label-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55);
$form-outline-select-option-group-select-option-padding-left: 26px;
$form-outline-select-option-color: var(--#{$prefix}surface-color);
$form-outline-select-option-padding-left: 16px;
$form-outline-select-option-padding-right: 16px;
$form-outline-select-option-font-size: 1rem;
$form-outline-select-option-font-weight: 400;
$form-outline-select-option-hover-not-disabled-bg: var(--#{$prefix}highlight-bg-color);
$form-outline-select-option-active-bg: var(--#{$prefix}highlight-bg-color);
$form-outline-select-option-selected-active-bg: rgba($primary, 0.45);
$form-outline-select-option-selected-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
$form-outline-select-option-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
$form-outline-select-option-text-form-check-input-margin-right: 10px;
$form-outline-select-option-secondary-text-font-size: 0.8rem;
$form-outline-select-option-secondary-text-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55);
$form-outline-select-option-icon-width: 28px;
$form-outline-select-option-icon-height: 28px;
$form-outline-select-custom-content-padding: 16px;
$form-outline-select-no-results-padding-left: 16px;
$form-outline-select-no-results-padding-right: 16px;
$form-outline-select-white-arrow: #fff;
$form-outline-select-option-selected-bg: rgba($primary, 0.3);
$form-outline-select-option-selected-hover-bg: $form-outline-select-option-selected-active-bg;
$form-outline-select-option-disabled-secondary-text-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.3);