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
ariaLabel string undefined Sets the aria-label attribute for accessibility.
ariaLabelledby string undefined Sets the aria-labelledby attribute for accessibility.
autoSelect boolean false Automatically selects the highlighted option when pressing Tab.
clearButton boolean false Displays a button to clear the current selection.
clearButtonTabindex number 0 Sets the tabindex for the clear button.
compareWith (o1: any, o2: any) => boolean (o1, o2) => o1 === o2 Custom comparison function for option values.
disabled boolean false Disables the select input.
displayedLabels number 5 Maximum number of selected options shown as labels before showing a summary.
dropdownClass string undefined Custom CSS classes for the dropdown container.
dropdownHeight number visibleOptions * optionHeight Sets the dropdown height in pixels.
filter boolean false Shows a filter input for searching options.
filterDebounce number 300 Debounce time in milliseconds for the filter input.
filterFn (option: string, filterValue: string) => boolean (option, filterValue) => option.includes(filterValue) Custom function to filter options.
filterPlaceholder string 'Search...' Placeholder text for the filter input.
highlightFirst boolean true Highlights the first option when the dropdown opens.
inputFilterId string undefined ID for the filter input element (for accessibility).
inputId string undefined ID for the select input element (for accessibility).
multiple boolean false Allows selecting multiple options.
notFoundMsg string 'No results found' Message shown when no options match the filter.
optionHeight number 38 Height of a single option in pixels.
optionsSelectedLabel string 'options selected' Text shown when multiple options are selected and summarized.
placeholder string '' Placeholder text for the select input.
required boolean false Marks the select field as required.
size 'sm' | 'lg' | 'default' 'default' Sets the size of the select input.
sortComparator (a: MdbOptionComponent, b: MdbOptionComponent, options: MdbOptionComponent[]) => number undefined Custom sorting function for selected options.
tabindex number 0 Tab index for the select input element.
value any undefined Sets the value of the select input.
visibleOptions number 5 Number of options visible in the dropdown 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. It returns single value for single select and an array for multiple select.
search EventEmitter<string> Event fired when the filter input value changes. Emits the current search string.
selected EventEmitter<MdbOptionComponent> Event fired when a value is selected in the select field. It returns only the values selected during the event (unlike valueChange event, which returns all selected values). The event can return a single value or an array if multiple values are selected simultaneously.
deselected EventEmitter<MdbOptionComponent | MdbOptionComponent[]> Event fired when a value is deselected in the select field. It returns only the values deselected during the event. The event can return a single value or an array if multiple values are deselected simultaneously. 
        
            
              <mdb-form-control>
                <mdb-select
                (opened)="onSelectOpen()"
                (closed)="onSelectClose()"
                (valueChange)="onSelectValueChange($event)"
                (selected)="onSelectValueSelected($event)"
                (deselected)="onSelectValueDeselected($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);
                }

                onSelectValueSelected(event: Event): void {
                  console.log('select value selected', event);
                }

                onSelectValueDeselected(event: Event): void {
                  console.log('select value deselected', 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;