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 },
];
}
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' },
];
}
Search
Set filter
input to true
to enable options filtering.
<mdb-form-control>
<mdb-select [filter]="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' },
];
}
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 |
---|---|---|---|
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;