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.

One

Show code

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.

Example label

Show code

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.

Example label

One

Show code

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.

Show code

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.

One

Show code

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.

One

Show code

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.

One

Show code

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.

One

Show code

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.

One

Show code

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.

One

Show code

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' },
      ]}
    />
  );
}

Search

Set search property to enable options filtering.

One

Show code

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' },
      ]}
      search
    />
  );
}

Select with search inside a modal

Show code

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.

One

Show code

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.

Show code

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.

Four

Show code

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.

Show code

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.

One

Show code

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.

One

Show code

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.

Example label

Show code

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.

Example label

One

Show code

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

Show code

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

Show code

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.

Show code

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

Show code

SCSS

$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;

Select

React Bootstrap 5 Select

Basic example

Multiselect

Select with label

Select with placeholder

Disabled select

Disabled options

Clear button

Custom content

Visible options

Secondary text

Search

Select with search inside a modal

Select with icons

Validation

Controlled value

Single selection

Multi selection

Controlled open state

Auto select

Hidden selected option

Select with CSS classes

Related resources

Select - API

Import

Properties

MDBSelect

Advanced types

SelectData

Methods

CSS variables

SCSS variables