Select

Angular Bootstrap 5 Select component

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

Basic example

Basic example of select component that allows you to choose from a number of options.

        
            
            <mdb-form-control>
              <mdb-select>
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Multiselect

Add [multiple]="true" input to the select element to activate multiple mode.

        
            
            <mdb-form-control>
              <mdb-select [multiple]="true">
                <mdb-select-all-option>Select all</mdb-select-all-option>
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Select with label

It is possible to add select label by creating element with mdbLabel directive and .form-label class. 

        
            
            <mdb-form-control>
              <mdb-select>
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

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. 

        
            
            <mdb-form-control>
              <mdb-select placeholder="Example placeholder">
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Disabled select

Add [disabled]="true" input to the select element to disable the component.

        
            
            <mdb-form-control>
              <mdb-select [disabled]="true">
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Disabled options

Use disabled input on option element to disable specific option.

        
            
            <mdb-form-control>
              <mdb-select>
                <mdb-option *ngFor="let option of options" [value]="option.value" [disabled]="option.disabled">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One', disabled: false },
                { value: '2', label: 'Two', disabled: true },
                { value: '3', label: 'Three', disabled: true },
                { value: '4', label: 'Four', disabled: false },
                { value: '5', label: 'Five', disabled: true },
                { value: '6', label: 'Six', disabled: false },
                { value: '7', label: 'Seven', disabled: false },
                { value: '8', label: 'Eigth', disabled: false },
              ];
            }

Clear button

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

        
            
            <mdb-form-control>
              <mdb-select [clearButton]="true">
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Custom content

A custom content container with a class .select-custom-content will be displayed at the end of the select dropdown. 

        
            
            <mdb-form-control>
              <mdb-select>
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
                <div class="select-custom-content">
                  <button class="btn-save btn btn-primary btn-sm">Save</button>
                </div>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Visible options

Use visibleOptions input to change the number of options that will be displayed in the select dropdown without scrolling. 

        
            
            <mdb-form-control>
              <mdb-select [visibleOptions]="3">
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}</mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Secondary text

Add container with class .option-secondary-text to the specific options to display secondary text. 

        
            
            <mdb-form-control>
              <mdb-select>
                <mdb-option *ngFor="let option of options" [value]="option.value" [label]="option.label">{{
                  option.label
                }}
                <span class="option-secondary-text">Secondary text</span>
                </mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' },
                { value: '4', label: 'Four' },
                { value: '5', label: 'Five' },
                { value: '6', label: 'Six' },
                { value: '7', label: 'Seven' },
                { value: '8', label: 'Eigth' },
              ];
            }

Option groups

It is possible to group options by using mdb-option-group component.

        
            
            <mdb-form-control>
              <mdb-select>
                <mdb-option-group *ngFor="let group of groups" [label]="group.name">
                  <mdb-option *ngFor="let option of group.options" [value]="option.value">{{
                    option.label
                  }}</mdb-option>
                </mdb-option-group>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              groups = [
                {
                  name: 'Label 1',
                  options: [
                    { value: 'first-group-1', label: 'One' },
                    { value: 'first-group-2', label: 'Two' },
                    { value: 'first-group-3', label: 'Three' },
                  ],
                },
                {
                  name: 'Label 2',
                  options: [
                    { value: 'second-group-4', label: 'Four' },
                    { value: 'second-group-5', label: 'Five' },
                    { value: 'second-group-6', label: 'Six' },
                  ],
                },
              ];
            }

Select with icons

Add conatiner with option-icon-container class to the specific option to display option icon. 

        
            
            <mdb-form-control>
              <mdb-select>
                <mdb-option *ngFor="let option of options" [value]="option.value">{{
                  option.label
                }}
                <span class="option-icon-container">
                  <img class="option-icon rounded-circle" [src]="option.icon" />
                </span>
                </mdb-option>
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              options = [
                { value: '1', label: 'One', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp' },
                { value: '2', label: 'Two', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp' },
                { value: '3', label: 'Three', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp' },
                { value: '4', label: 'Four', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp' },
                { value: '5', label: 'Five', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp' },
              ];
            }

Validation

Use mdbValidate directive to enable validation styles and mdb-error and mdb-success components to display validation messages.

Note: This example uses MDB Angular Validation. Remember to import MdbValidationModule and ReactiveFormsModule to enable reactive forms validation in Angular. 

        
            
        <form [formGroup]="validationForm" (ngSubmit)="onSubmit()" #form="ngForm">
          <mdb-form-control>
            <mdb-select
              mdbValidate
              [clearButton]="true"
              formControlName="select"
              [ngClass]="{
                'mb-3': form.submitted
              }"
            >
              <mdb-option *ngFor="let option of options" [value]="option.value">{{
                option.label
              }}</mdb-option>
            </mdb-select>
            <mdb-error *ngIf="select?.invalid && (select?.dirty || select?.touched)"
              >This value is invalid
            </mdb-error>
            <mdb-success *ngIf="select?.valid && (select?.dirty || select?.touched)"
              >This value is valid
            </mdb-success>
          </mdb-form-control>
          <button class="btn btn-primary btn-sm mt-3" type="submit">Submit</button>
        </form>
        
        
    
        
            
        import { Component } from '@angular/core';
        import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          validationForm = new UntypedFormGroup({
            select: new UntypedFormControl('1', { validators: Validators.required, updateOn: 'submit' }),
          });
          options = [
            { value: '1', label: 'One' },
            { value: '2', label: 'Two' },
            { value: '3', label: 'Three' },
            { value: '4', label: 'Four' },
            { value: '5', label: 'Five' },
            { value: '6', label: 'Six' },
            { value: '7', label: 'Seven' },
            { value: '8', label: 'Eigth' },
          ];

          get select(): AbstractControl {
            return this.validationForm.get('select');
          }

          onSubmit(): void {
            this.validationForm.markAllAsTouched();
          }
        }

Set value

It is possible to set default value using Angular reactive or template driven forms methods.

Reactive forms

Create new formControl with a value (or array of values in multiselect) to select option with corresponding value. 

        
            
              <mdb-form-control>
                <mdb-select [formControl]="selectedValue">
                  <mdb-option *ngFor="let option of options" [value]="option.value">{{
                    option.label
                  }}</mdb-option>
                </mdb-select>
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { FormControl } from '@angular/forms';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                selectedValue = new FormControl('4');
                options = [
                  { value: '1', label: 'One' },
                  { value: '2', label: 'Two' },
                  { value: '3', label: 'Three' },
                  { value: '4', label: 'Four' },
                  { value: '5', label: 'Five' },
                  { value: '6', label: 'Six' },
                  { value: '7', label: 'Seven' },
                  { value: '8', label: 'Eigth' },
                ];
              }

Template driven forms

Add a value (or array of values in multiselect) to the ngModel to select option with corresponding value. 

        
            
              <mdb-form-control>
                <mdb-select [(ngModel)]="selectedValue">
                  <mdb-option *ngFor="let option of options" [value]="option.value">{{
                    option.label
                  }}</mdb-option>
                </mdb-select>
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                selectedValue = '4';
                options = [
                  { value: '1', label: 'One' },
                  { value: '2', label: 'Two' },
                  { value: '3', label: 'Three' },
                  { value: '4', label: 'Four' },
                  { value: '5', label: 'Five' },
                  { value: '6', label: 'Six' },
                  { value: '7', label: 'Seven' },
                  { value: '8', label: 'Eigth' },
                ];
              }

Select - API

Import

        
            
          import { MdbSelectModule } from 'mdb-angular-ui-kit/select';
          import { FormsModule, ReactiveFormsModule } from '@angular/forms';

          …
          @NgModule ({
            ...
            imports: [MdbSelectModule, FormsModule, ReactiveFormsModule],
            ...
          })

Inputs

Name Type Default Description
clearButton boolean false Adds clear button to the select input.
disabled boolean false Changes select input state to disabled.
filter boolean false Displays filter input that allow to search for specific option.
filterFn (option: string, filterValue: string) => boolean (option, filterValue) => option.includes(filterValue) Defines filtering function.
filterPlaceholder string 'Search...' Changes select search input placeholder.
highlightFirst boolean true Enables highlight on first option.
inputId string - Declares id attribute for input element. Helps with accessibility issues.
inputFilterId string - Declares id attribute for filter input element. Helps with accessibility issues.
multiple boolean false Enables selecting multiple options.
notFoundMsg 'No results found' Defines custom not found message for select search box.
optionHeight number 38 Changes the single option height value.
placeholder string '' Defines placeholder for select input element.
size 'default' | 'lg' | 'sm' 'default' Defines input's size. Available options: 'sm', 'lg', 'default'.
tabindex number 0 Defines the tabindex attribute value for select input element.
visibleOptions number 5 Changes number of visible options in options list.

Outputs

Name Type Description
closed EventEmitter<void> Event fired when the select is closed
opened EventEmitter<void> Event fired when the select is opened
valueChange EventEmitter<any> Event fired when the select value is changed 
        
            
              <mdb-form-control>
                <mdb-select
                (opened)="onSelectOpen()"
                (closed)="onSelectClose()"
                (valueChange)="onSelectValueChange($event)"
              >
                  <mdb-option *ngFor="let option of options" [value]="option.value"
                    >{{ option.label }}</mdb-option
                  >
                </mdb-select>
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                options = [
                  { value: '1', label: 'One' },
                  { value: '2', label: 'Two' },
                  { value: '3', label: 'Three' },
                  { value: '4', label: 'Four' },
                  { value: '5', label: 'Five' },
                  { value: '6', label: 'Six' },
                  { value: '7', label: 'Seven' },
                  { value: '8', label: 'Eigth' },
                ];

                onSelectOpen(): void {
                  console.log('select open');
                }
              
                onSelectClose(): void {
                  console.log('select close');
                }
              
                onSelectValueChange(event: any): void {
                  console.log('select value changed', event);
                }
              }

Methods

Name Description Example
close Manually close the component select.close()
open Manually open the component select.open() 
        
            
              <mdb-form-control>
                <mdb-select #select>
                  <mdb-option *ngFor="let option of options" [value]="option.value">{{
                    option.label
                  }}</mdb-option>
                </mdb-select>
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            
        
    
        
            
              import { Component, ViewChild, AfterViewInit } from '@angular/core';
              import { MdbSelectComponent } from 'mdb-angular-ui-kit/select';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent implements AfterViewInit {
                @ViewChild('select', { static: true }) select!: MdbSelectComponent;

                options = [
                  { value: '1', label: 'One' },
                  { value: '2', label: 'Two' },
                  { value: '3', label: 'Three' },
                  { value: '4', label: 'Four' },
                  { value: '5', label: 'Five' },
                  { value: '6', label: 'Six' },
                  { value: '7', label: 'Seven' },
                  { value: '8', label: 'Eigth' },
                ];

                ngAfterViewInit(): void {
                  Promise.resolve().then(() => {
                    this.select.open();
                  });
                }
              }

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};
      
        // .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-selected-bg: #{$form-outline-select-option-selected-bg};
        --#{$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-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};
        --#{$prefix}form-outline-select-white-arrow: #{$form-outline-select-white-arrow};

SCSS variables

        
            
        $form-outline-select-arrow-color: #000;
        $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: #000;
        $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: #fff;
        $form-outline-select-dropdown-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
          0 2px 10px 0 rgba(0, 0, 0, 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: #616161;
        
        $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: #999;
        $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(0, 0, 0, 0.54);
        
        $form-outline-select-option-group-select-option-padding-left: 26px;
        
        $form-outline-select-option-color: rgba(0, 0, 0, 0.87);
        $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: rgba(0, 0, 0, 0.048);
        $form-outline-select-option-active-bg: rgba(0, 0, 0, 0.048);
        $form-outline-select-option-selected-active-bg: rgba(0, 0, 0, 0.048);
        $form-outline-select-option-selected-disabled-color: #9e9e9e;
        $form-outline-select-option-selected-bg: rgba(0, 0, 0, 0.02);
        $form-outline-select-option-disabled-color: #9e9e9e;
        
        $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: #6c757d;
        
        $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;