Select

React Bootstrap 5 Select

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

Info: This documentation may contain syntax introduced in the MDB5 React 4.0.0 and can be incompatible with previous versions. For old MDBSelect documentation please follow the link.

Note: Read the API tab to find all available options and advanced customization

Basic example

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

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

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One', value: 1 },
                    { text: 'Two', value: 2 },
                    { text: 'Three', value: 3 },
                    { text: 'Four', value: 4 },
                    { text: 'Five', value: 5 },
                    { text: 'Six', value: 6 },
                    { text: 'Seven', value: 7 },
                    { text: 'Eight', value: 8 },
                  ]}
                />
              );
            }

Multiselect

Add multiple property to the select element to activate multiple mode.

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  multiple
                  label='Example label'
                />
              );
            }

Select with label

It is possible to add select label by setting the label property. 

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  label='Example label'
                  data={[
                    { text: 'One', value: '1' },
                    { text: 'Two', value: '2' },
                    { text: 'Three', value: '3' },
                    { text: 'Four', value: '4' },
                    { text: 'Five', value: '5' },
                  ]}
                />
              );
            }

Select with placeholder

Use placeholder property to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected. 

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: '' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  placeholder='Example placeholder'
                />       
              );
            }

Disabled select

Add disabled attribute to the select component to disable select input.

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  disabled
                />
              );
            }

Disabled options

Use disabled key on option element to disable specific option.

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One', value: 1 },
                    { text: 'Two', value: 2, disabled: true },
                    { text: 'Three', value: 3, disabled: true },
                    { text: 'Four', value: 4 },
                    { text: 'Five', value: 5 },
                    { text: 'Six', value: 6 },
                    { text: 'Seven', value: 7 },
                    { text: 'Eight', value: 8 },
                  ]}
                />
              );
            }

Clear button

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

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  clearBtn
                  label='Example label'
                />
              );
            }

Custom content

Custom content will be displayed at the end of the select dropdown.

        
            
            import React from 'react';
            import { MDBSelect, MDBBtn } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect data={[
                  { text: 'One' },
                  { text: 'Two' },
                  { text: 'Three' },
                  { text: 'Four', }
                ]}>
                  <MDBBtn size='sm'>Save</MDBBtn>
                </MDBSelect>
              );
            }

Visible options

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

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  visibleOptions={3}
                />
              );
            }

Secondary text

Add secondaryText key to the specific options to display secondary text.

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One', secondaryText: 'Secondary text' },
                    { text: 'Two', secondaryText: 'Secondary text' },
                    { text: 'Three', secondaryText: 'Secondary text' },
                    { text: 'Four', secondaryText: 'Secondary text' },
                  ]}
                />
              );
            }

Select with search inside a modal

        
            
            import React, { useState } from 'react';
            import {
              MDBBtn,
              MDBSelect,
              MDBModal,
              MDBModalDialog,
              MDBModalContent,
              MDBModalHeader,
              MDBModalTitle,
              MDBModalBody,
              MDBModalFooter,
            } from "mdb-react-ui-kit";

            export default function App() {
              const [basicModal, setBasicModal] = useState(false);

              const toggleShow = () => setBasicModal(!basicModal);

              return (
                <>
                  <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
                  <MDBModal show={basicModal} setShow={setBasicModal} tabIndex="-1">
                    <MDBModalDialog>
                      <MDBModalContent>
                        <MDBModalHeader>
                          <MDBModalTitle>Modal title</MDBModalTitle>
                          <MDBBtn
                            className="btn-close"
                            color="none"
                            onClick={toggleShow}
                          ></MDBBtn>
                        </MDBModalHeader>
                        <MDBModalBody>
                          {basicModal && (
                            <MDBSelect
                              search
                              data={[
                                { text: "One", value: 1 },
                                { text: "Two", value: 2 },
                                { text: "Three", value: 3 },
                                { text: "Four", value: 4 },
                                { text: "Five", value: 5 },
                                { text: "Six", value: 6 },
                                { text: "Seven", value: 7 },
                                { text: "Eight", value: 8 },
                                { text: "Nine", value: 9 },
                                { text: "Ten", value: 10 },
                              ]}
                            />
                          )}
                        </MDBModalBody>
        
                        <MDBModalFooter>
                          <MDBBtn color="secondary" onClick={toggleShow}>
                            Close
                          </MDBBtn>
                          <MDBBtn>Save changes</MDBBtn>
                        </MDBModalFooter>
                      </MDBModalContent>
                    </MDBModalDialog>
                  </MDBModal>
                </>
              );
            }

Select with icons

Add icon property to the specific options to display the option icon.

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    {
                      text: 'One',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp',
                    },
                    {
                      text: 'Two',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp',
                    },
                    {
                      text: 'Three',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp',
                    },
                    {
                      text: 'Four',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp',
                    },
                    {
                      text: 'Five',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp',
                    },
                  ]}
                />
              );
            }

Validation

Set validation option to true to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages. 

        
            
            import React from 'react';
            import { MDBSelect, MDBValidation, MDBBtn } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBValidation noValidate>
                  <MDBSelect
                    data={[
                      { text: 'One', value: 1 },
                      { text: 'Two', value: 2 },
                      { text: 'Three', value: 3 },
                      { text: 'Four', value: 4 },
                      { text: 'Five', value: 5 },
                      { text: 'Six', value: 6 },
                      { text: 'Seven', value: 7 },
                      { text: 'Eight', value: 8 },
                    ]}
                    clearBtn
                    validation
                    validFeedback='This value is valid'
                    invalidFeedback='This value is invalid'
                  />
                  <MDBBtn size='sm' className='mt-3' type='submit'>
                    Submit
                  </MDBBtn>
                </MDBValidation>
              );
            }

Controlled value

Set value prop to control the component value. The onValueChange event allows to handle the value change.

Single selection

For a standard single selection, type of the value should be a number. 

        
            
              import React, { useState } from 'react';
              import { MDBSelect } from 'mdb-react-ui-kit';

              export default function App() {
                const [selectValue, setSelectValue] = useState(4);
                const [selectData, setSelectData] = useState([
                  { text: 'One', value: 1 },
                  { text: 'Two', value: 2 },
                  { text: 'Three', value: 3 },
                  { text: 'Four', value: 4 },
                  { text: 'Five', value: 5 },
                ]);

                return (
                  <MDBSelect
                    data={selectData}
                    label='Example label'
                    value={selectValue}
                    onValueChange={(e) => {
                      setSelectValue(e.value);
                    }}
                  />
                );
              }

Multi selection

For a multiselect, type of the value should be an array of numbers. 

        
            
              import React, { useState } from 'react';
              import { MDBSelect } from 'mdb-react-ui-kit';

              export default function App() {
                const [selectValue, setSelectValue] = useState([3, 4, 5]);
                const [selectData, setSelectData] = useState([
                  { text: 'One', value: 1 },
                  { text: 'Two', value: 2 },
                  { text: 'Three', value: 3 },
                  { text: 'Four', value: 4 },
                  { text: 'Five', value: 5 },
                ]);

                return (
                  <MDBSelect
                    multiple
                    data={selectData}
                    label='Example label'
                    value={selectValue}
                    onValueChange={(e) => {
                      setSelectValue(e.value);
                    }}
                  />
                );
              }

Controlled open state

Set open property to control the component open state. The onOpen and onClose events allow to handle the open state change. 

        
            
            import React, { useState } from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              const [selectOpen, setSelectOpen] = useState(false);

              return (
                <MDBSelect
                  data={[
                    { text: 'One', value: 1 },
                    { text: 'Two', value: 2 },
                    { text: 'Three', value: 3 },
                    { text: 'Four', value: 4 },
                    { text: 'Five', value: 5 },
                    { text: 'Six', value: 6 },
                    { text: 'Seven', value: 7 },
                    { text: 'Eight', value: 8 },
                  ]}
                  open={selectOpen}
                  onOpen={() => setSelectOpen(true)}
                  onClose={() => setSelectOpen(false)}
                />
              );
            }

Auto select

Set autoSelect option to true to enable selecting on Tab press. 

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  autoSelect
                  data={[
                    { text: "One", value: 1 },
                    { text: "Two", value: 2 },
                    { text: "Three", value: 3 },
                    { text: "Four", value: 4 },
                    { text: "Five", value: 5 },
                    { text: "Six", value: 6 },
                    { text: "Seven", value: 7 },
                    { text: "Eight", value: 8 },
                    { text: "Nine", value: 9 },
                    { text: "Ten", value: 10 },
                  ]}
                />
              );
            }

Hidden selected option

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

        
            
            import React from 'react';
            import { MDBSelect } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelect
                  label="Example label"
                  data={[
                    { text: '', hidden: true },
                    { text: 'One', value: 1 },
                    { text: 'Two', value: 2 },
                    { text: 'Three', value: 3 },
                    { text: 'Four', value: 4 },
                    { text: 'Five', value: 5 },
                    { text: 'Six', value: 6 },
                    { text: 'Seven', value: 7 },
                    { text: 'Eight', value: 8 },
                  ]}
                />
              );
            }

Select with CSS classes

In order to use select with additional CSS classes you need to place it in the div wrapper and use CSS classes on that div. In case you use display classes like .d-lg-none and select is not visible on page load you need to use code from this example to update label width when select became visible. 

        
            
              import React from 'react';
              import { MDBSelect } from 'mdb-react-ui-kit';

              export default function App() {
                return (
                  <MDBSelect
                  className="shadow-5"
                    data={[
                      { text: 'One', value: 1 },
                      { text: 'Two', value: 2 },
                      { text: 'Three', value: 3 },
                      { text: 'Four', value: 4 },
                      { text: 'Five', value: 5 },
                      { text: 'Six', value: 6 },
                      { text: 'Seven', value: 7 },
                      { text: 'Eight', value: 8 },
                    ]}
                  />
                );
              }

Select - API

Import

        
            
            import { MDBSelect } from 'mdb-react-ui-kit';

Properties

MDBSelect

Name Type Default Description Example
autoSelect boolean false Enables auto selecting on Tab press <MDBSelect autoSelect />
animationVariants animationVariants?: {   open?: Record;   closed?: Record; }; { open: { opacity: 1, transform: 'scaleY(1)', transition: { duration: 0.2, }, }, closed: { opacity: 0, transform: 'scaleY(0.8)', transition: { duration: 0.2, }, }, } Defines animation variants <MDBSelect animationVariants={{ open: { height: 'auto', overflow: 'hidden' }, closed: { height: '0px' } }} />
value Array | string | number undefined Enables controlling selected options. Pass value of the option you want to choose, or array for multiselect. <MDBSelect value={multiselect ? [1, 2] : 1} />
open boolean undefined Enables controlling the open state. Typical use case expects handlers on onOpen and onClose events <MDBSelect open={isOpen} onOpen={() => setIsOpen(true)} />
clearBtn boolean false Add clear btn to MDBSelect <MDBSelect clearBtn />
contrast boolean false Adjust input colors for dark backgrounds <MDBSelect contrast />
data SelectData[] {} Add data to MDBSelect <MDBSelect data={[ { text: 'One', value: 1 } ]} />
disabled boolean false Disables MDBSelect component. Adds disabled to the input. <MDBSelect 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 <MDBSelect displayedLabels={3} />
inputClassName string '' Add class to MDBSelect input element <MDBSelect inputClassName='test' />
invalidFeedback string '' Invalid feedback for MDBSelect <MDBSelect invalidFeedback='test' />
label string '' Add label to select <MDBSelect label='test' />
noResultsText string 'No results' Change text in option search if there is no records in search value. <MDBSelect noResultLabel="test" />
optionHeight number 38 Defines a height of the options (in px) <MDBSelect visibleOptions="3" />
optionsSelectedLabel string 'options selected' The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected <MDBSelect optionsSelectedLabel='options checked' />
placeholder string '' Add placeholder to MDBSelect <MDBSelect placeholder="test" />
preventFirstSelection boolean false Prevents selecting first option by default <MDBSelect preventFirstSelected />
search boolean false Add search to MDBSelect input in dropdown <MDBSelect search />
searchFn (query: string, data: ExtendedSelectData[]) => ExtendedSelectData[] - Customize search function <MDBSelect search searchFn={(query, data) => data.filter((opt) => opt.value == query)} />
searchLabel string 'Example Label' Change label of input <MDBSelect searchLabel="test" />
selectAll boolean true Displays select all option in multiselect dropdown <MDBSelect selectAll={false} />
selectAllLabel string 'Select all' Change label to select all option in multiselect <MDBSelect selectAllLabel="test" />
size 'default' | 'lg' | 'sm' 'default' Size of the MDBSelect <MDBSelect size='lg' />
multiple boolean false Change select to multiselect <MDBSelect multiple />
validation boolean false Enables validation for the MDBSelect <MDBSelect validation />
validFeedback string '' Valid feedback for MDBSelect <MDBSelect validFeedback='test' />
visibleOptions string | number '5' Change visible options in MDBSelect <MDBSelect visibleOptions="3" />

Advanced types

SelectData

        
                  
              type SelectData = {
                disabled?: boolean;
                hidden?: boolean;
                text?: string;
                defaultSelected?: boolean;
                secondaryText?: React.ReactNode;
                value?: string | number;
                icon?: string;
                active?: boolean;
                optgroup?: string;       
              };

Methods

Name Type Default Description Example
onChange (data: SelectData[] | SelectData) => void - This method returns a selected item in the MDBSelect or an array of items in multiple <MDBSelect onChange={(val) => setSelectValue(val)} />
onOpen () => void - Fires when the select demands to be opened. <MDBSelect onOpen={() => console.log('open')} />
onOpened () => void - Fires after select is opened. <MDBSelect onOpened={() => console.log('opened')} />
onClose () => void - Fires when the select demands to be closed. <MDBSelect onClose={() => console.log('close')} />
onClosed () => void - Fires after the select is closed. <MDBSelect onClose={() => console.log('closed')} />

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;