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.

This value is valid
This value is invalid
✕
One
<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.

Four
<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.

Four
<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
autoSelect boolean false Enables auto selecting on Tab press.
clearButton boolean false Adds clear button to the select input.
clearButtonTabindex number 0 Enables setting a custom tabIndex for the clear button.
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.
dropdownClass string '' Enables adding custom classes to the select dropdown when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
dropdownHeight number visibleOptions * optionHeight Enables setting a specific select dropdown height in pixels.
filter boolean false Displays filter input that allow to search for specific option.
filterDebounce number 300 Adds delay to the options list updates when using filter input. Improves performance of the select with filter.
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.
inputFilterId string '' Declares id attribute for filter input element. Helps with accessibility issues.
inputId string '' Declares id attribute for input element. Helps with accessibility issues.
multiple boolean false Enables selecting multiple options.
notFoundMsg string '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.
required boolean false Enables marking the select field as required.
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. It returns single value for single select and an array for multiple select.
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;