Select

Bootstrap 5 Select component

Select fields components are used for collecting user provided information from a list of options.

Required ES init: Select *
* 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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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 });

Clear button

Set clearButton option to true to display the button that will allow to clear current selections.

Edit in sandbox 
        
            
          <select data-mdb-select-init 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>
          </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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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 });
Note: If you need further customization of select dropdown, e.g. placing a link within a dropdown, you can utilize the code from the snippet that combines an input and a dropdown as an alternative to a select element.

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.

Edit in sandbox 
        
            
      <!-- 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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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 });

Hidden selected option

Add the first option with the hidden and selected attributes and an empty value to leave select with no selection.

Edit in sandbox 
        
            
              <select data-mdb-select-init>
                <option value="" hidden selected></option>
                <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 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.

Edit in sandbox 
        
            
            <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.

Edit in sandbox 
        
            
          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.

Edit in sandbox 
        
            
        <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

Edit in sandbox 
        
            
        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
multiple Boolean false Changes select to allow selecting more than one option
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)
Edit in sandbox 
        
            
            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.
Edit in sandbox 
        
            
            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.

Edit in sandbox 
        
            
        // .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

Edit in sandbox 
        
            
        $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);