CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

React Multi Select Component

Customize the native <select>s with a powerful Multi-Select component that changes the element’s initial appearance and brings some new functionalities.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

Basic example#

Framework

Please select your framework.

const options = [
  {
    value: 0,
    label: 'Angular',
  },
  {
    value: 1,
    label: 'Bootstrap',
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect options={options} label="Framework" text="Please select your framework." />

const options = [
  {
    value: 0,
    label: 'Angular',
  },
  {
    value: 1,
    label: 'Bootstrap',
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect options={options} />

Modes#

Allow create options#

The allowCreateOptions property in the <CMultiselect /> component allows users to create new options in addition to selecting pre-existing ones from a list.

When this property is set to true, the user can type in a new option in the search input field of the multiselect component, and if the option does not already exist in the list, it will be created and added to the list of available options. This can be useful when the list of available options is not comprehensive or when the user needs to select an option that is not already available.

It's worth noting that this feature may not always be appropriate, depending on the specific use case of the multiselect component. In some cases, it may be preferable to restrict the user to selecting only pre-existing options, while in other cases, allowing for the creation of new options may be essential. It's important to consider the specific requirements of your application when deciding whether to enable this feature.

const options = [
  {
    value: 0,
    label: 'Angular',
    selected: true,
  },
  {
    value: 1,
    label: 'Bootstrap',
    selected: true,
    disabled: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
        selected: true,
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect allowCreateOptions options={options} />

Clear search on select#

The clearSearchOnSelect property is a Boolean attribute that can be used with the MultiSelect component in the CoreUI React library.

When clearSearchOnSelect is set to true, the search input field in the MultiSelect component will be cleared as soon as the user selects an option from the dropdown list. This means that the search query will be reset and the user will be able to start a new search immediately.

By default, clearSearchOnSelect is set to false, which means that the search input field will retain the user's search query even after an option has been selected. This can be useful in situations where the user needs to select multiple options from the dropdown list that match the same search query.

To use the clearSearchOnSelect property with the MultiSelect component in the CoreUI React library, you simply need to set it to true or false as appropriate in your code. For example:

const options = [
  {
    value: 0,
    label: 'Angular',
    selected: true,
  },
  {
    value: 1,
    label: 'Bootstrap',
    selected: true,
    disabled: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
        selected: true,
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect clearSearchOnSelect options={options} />

In this example, the clearSearchOnSelect property is set to true, which means that the search input field will be cleared as soon as the user selects an option from the dropdown list.

Selection types#

The React Multi Select component enables users to present selected items in multiple ways. Users can choose to display selected items as a counter, tags, or a list of comma-separated values.

To change the way that selected items are displayed, you can use the selectionType property to set the presentation type.

Tags#

By default, the selectionType property is set to "tags", which displays selected options as tags. Users can remove a selected option by pressing the "X" button.

const options = [
  {
    value: 0,
    label: 'Angular',
    selected: true,
  },
  {
    value: 1,
    label: 'Bootstrap',
    selected: true,
    disabled: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
        selected: true,
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect options={options} selectionType="tags" />

Counter#

In the example below, selected items from the list are counted and presented in the form of a counter. To use this option, set the selectionType to "counter".

To further customize the counter, the selectionTypeCounterText property allows you to set the text that is displayed after the counter.

const options = [
  {
    value: 0,
    label: 'Angular',
    selected: true,
  },
  {
    value: 1,
    label: 'Bootstrap',
    selected: true,
    disabled: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
        selected: true,
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect options={options} selectionType="counter" />

Text#

To display the list of selected options as comma-separated text values, set the selectionType property to "text".

const options = [
  {
    value: 0,
    label: 'Angular',
    selected: true,
  },
  {
    value: 1,
    label: 'Bootstrap',
    selected: true,
    disabled: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
        selected: true,
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect options={options} selectionType="text" />

Single Selection#

Set the multiple boolean property to false and allow select only one element.

const options = [
  {
    value: 0,
    label: 'Angular',
  },
  {
    value: 1,
    label: 'Bootstrap',
    disabled: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect multiple={false} options={options} />

Custom options and options group labels#

The CoreUI React Multi Select component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the optionsTemplate, and for groups, you can use optionsGroupsTemplate, as demonstrated in the examples below:

Select country

Select city

import { cifPl, cifDe, cifUs, cifEs, cifGb } from '@coreui/icons'
import CIcon from '@coreui/icons-react'

const flags = {
  de: cifDe,
  es: cifEs,
  gb: cifGb,
  pl: cifPl,
  us: cifUs
}

const countries = [
  {
    value: 'pl',
    label: 'Poland',
  },
  {
    value: 'de',
    label: 'Germany',
  },
  {
    value: 'us',
    label: 'United States',
  },
  {
    value: 'es',
    label: 'Spain',
  },
  {
    value: 'gb',
    label: 'United Kingdom',
  },
]

const cities = [
  {
    label: 'United States',
    code: 'us',
    options: [
      {
        value: 'au',
        label: 'Austin',
      },
      {
        value: 'ch',
        label: 'Chicago',
      },
      {
        value: 'la',
        label: 'Los Angeles',
      },
      {
        value: 'ny',
        label: 'New York',
      },
      {
        value: 'sa',
        label: 'San Jose',
      },
    ],
  },
  {
    label: 'United Kingdom',
    code: 'gb',
    options: [
      {
        value: 'li',
        label: 'Liverpool',
      },
      {
        value: 'lo',
        label: 'London',
      },
      {
        value: 'ma',
        label: 'Manchester',
      },
    ],
  },
]

return (
  <CRow>
    <CCol md={6}>
      <CMultiSelect 
        label="Select country"
        options={countries}
        optionsStyle="text"
        optionsTemplate={
          (option) => (
            <div className="d-flex">
              <CIcon className="me-3" icon={flags[option.value]} size="xl"/> {option.label}
            </div>
          )
        }
      />
    </CCol>
    <CCol md={6}>
      <CMultiSelect 
        label="Select city"
        options={cities}
        optionsGroupsTemplate={
          (option) => (
            <div className="d-flex align-items-center">
              <CIcon className="me-3" icon={flags[option.code]} size="xl"/> {option.label}
            </div>
          )
        }
      />
    </CCol>
  </CRow>
)

Disabled#

Add the disabled boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.

const options = [
  {
    value: 0,
    label: 'Angular',
    selected: true,
  },
  {
    value: 1,
    label: 'Bootstrap',
    selected: true,
    disabled: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
        selected: true,
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return <CMultiSelect disabled options={options} />

Sizing#

You may also choose from small and large multi selects to match our similarly sized text inputs.

const options = [
  {
    value: 0,
    label: 'Angular',
    selected: true,
  },
  {
    value: 1,
    label: 'Bootstrap',
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
      },
      {
        value: 6,
        label: 'Node.js',
      },
    ],
  },
]
return (
  <CRow>
    <CCol md={6} className="mb-3">
      <CMultiSelect options={options} selectionType="counter" size="lg" />
    </CCol>
    <CCol md={6} className="mb-3">
      <CMultiSelect options={options} size="lg" />
    </CCol>
    <CCol md={6}>
      <CMultiSelect options={options} selectionType="counter" size="sm" />
    </CCol>
    <CCol md={6}>
      <CMultiSelect options={options} size="sm" />
    </CCol>
  </CRow>
)

Virtual Scroller (1000 records)#

To enhance performance and manage large amounts of data in React Multi Select, you can generate a list of options using <CVirtualScroller />. This component renders only the items currently visible on the screen, and as the user scrolls, new items are dynamically loaded and added to the view. This helps to reduce the data load and processing time, resulting in a more responsive UI.

To enable Virtual Scroller, simply set the virtualScroller boolean property to true, as shown in the example below.

Users

Please select your user.

const users = [
  {
    value: "1",
    label: "Nanon",
  },
  ...
  {
    value: "1000",
    label: "Jasper",
  },
]
return (
  <CMultiSelect
    options={users}
    label="Users"
    text="Please select your user."
    virtualScroller
  />
)

External Data#

One of the key features of React Multi Select component is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don't want to load all at once. To load external data into a React MultiSelect, you can use the Fetch API to the data source.

Here is an example of how you might use React Multi Select with external data:

Users

Please select your user.

const [loading, setLoading] = useState(false)
const [users, setUsers] = useState([])
const getUsers = useCallback((name = "") => {
  setLoading(true)
  fetch(`https://apitest.coreui.io/demos/users?first_name=${name}`)
    .then((response) => response.json())
    .then((result) => {
      setUsers(
        result.records.map((record) => {
          return {
            value: record.id,
            label: record.first_name,
          }
        }),
      )
      setLoading(false)
    })
}, [])
useEffect(() => {
  getUsers()
}, [getUsers])
return (
  <CMultiSelect
    label="Users"
    loading={loading}
    onFilterChange={(value) => getUsers(value)}
    options={users}
    text="Please select your user."
    search="external"
    virtualScroller
  />
)

To handle a large amount of data and improve performance, this example uses the <CVirtualScroller /> component to show the options list.

Customizing#

CSS variables#

React multi selects use local CSS variables on .form-multi-select for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-form-multi-select-zindex: #{$form-multi-select-zindex};
--cui-form-multi-select-font-family: #{$form-multi-select-font-family};
--cui-form-multi-select-font-size: #{$form-multi-select-font-size};
--cui-form-multi-select-font-weight: #{$form-multi-select-font-weight};
--cui-form-multi-select-line-height: #{$form-multi-select-line-height};
--cui-form-multi-select-color: #{$form-multi-select-color};
--cui-form-multi-select-bg: #{$form-multi-select-bg};
--cui-form-multi-select-box-shadow: #{$form-multi-select-box-shadow};
--cui-form-multi-select-border-width: #{$form-multi-select-border-width};
--cui-form-multi-select-border-color: #{$form-multi-select-border-color};
--cui-form-multi-select-border-radius: #{$form-multi-select-border-radius};
--cui-form-multi-select-disabled-color: #{$form-multi-select-disabled-color};
--cui-form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg};
--cui-form-multi-select-disabled-border-color: #{$form-multi-select-disabled-border-color};
--cui-form-multi-select-focus-color: #{$form-multi-select-focus-color};
--cui-form-multi-select-focus-bg: #{$form-multi-select-focus-bg};
--cui-form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color};
--cui-form-multi-select-focus-box-shadow: #{$form-multi-select-focus-box-shadow};
--cui-form-multi-select-placeholder-color: #{$form-multi-select-placeholder-color};
--cui-form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y};
--cui-form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x};
--cui-form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width};
--cui-form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height};
--cui-form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y};
--cui-form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x};
--cui-form-multi-select-cleaner-icon: #{escape-svg($form-multi-select-cleaner-icon)};
--cui-form-multi-select-cleaner-icon-color: #{$form-multi-select-cleaner-icon-color};
--cui-form-multi-select-cleaner-icon-hover-color: #{$form-multi-select-cleaner-icon-hover-color};
--cui-form-multi-select-cleaner-icon-size: #{$form-multi-select-cleaner-icon-size};
--cui-form-multi-select-indicator-width: #{$form-multi-select-indicator-width};
--cui-form-multi-select-indicator-height: #{$form-multi-select-indicator-height};
--cui-form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y};
--cui-form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x};
--cui-form-multi-select-indicator-icon: #{escape-svg($form-multi-select-indicator-icon)};
--cui-form-multi-select-indicator-icon-color: #{$form-multi-select-indicator-icon-color};
--cui-form-multi-select-indicator-icon-hover-color: #{$form-multi-select-indicator-icon-hover-color};
--cui-form-multi-select-indicator-icon-size: #{$form-multi-select-indicator-icon-size};
--cui-form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y};
--cui-form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x};
--cui-form-multi-select-select-all-color: #{$form-multi-select-select-all-color};
--cui-form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg};
--cui-form-multi-select-select-all-border-width: #{$form-multi-select-select-all-border-width};
--cui-form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color};
--cui-form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color};
--cui-form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg};
--cui-form-multi-select-dropdown-min-width: #{$form-multi-select-dropdown-min-width};
--cui-form-multi-select-dropdown-bg: #{$form-multi-select-dropdown-bg};
--cui-form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width};
--cui-form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color};
--cui-form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius};
--cui-form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow};
--cui-form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y};
--cui-form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x};
--cui-form-multi-select-options-font-size: #{$form-multi-select-options-font-size};
--cui-form-multi-select-options-font-weight: #{$form-multi-select-options-font-weight};
--cui-form-multi-select-options-color: #{$form-multi-select-options-color};
--cui-form-multi-select-optgroup-label-padding-y: #{$form-multi-select-optgroup-label-padding-y};
--cui-form-multi-select-optgroup-label-padding-x: #{$form-multi-select-optgroup-label-padding-x};
--cui-form-multi-select-optgroup-label-font-size: #{$form-multi-select-optgroup-label-font-size};
--cui-form-multi-select-optgroup-label-font-weight: #{$form-multi-select-optgroup-label-font-weight};
--cui-form-multi-select-optgroup-label-color: #{$form-multi-select-optgroup-label-color};
--cui-form-multi-select-optgroup-label-text-transform: #{$form-multi-select-optgroup-label-text-transform};
--cui-form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y};
--cui-form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x};
--cui-form-multi-select-option-margin-y: #{$form-multi-select-option-margin-y};
--cui-form-multi-select-option-margin-x: #{$form-multi-select-option-margin-x};
--cui-form-multi-select-option-border-width: #{$form-multi-select-option-border-width};
--cui-form-multi-select-option-border-color: #{$form-multi-select-option-border-color};
--cui-form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius};
--cui-form-multi-select-option-box-shadow: #{$form-multi-select-option-box-shadow};
--cui-form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color};
--cui-form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg};
--cui-form-multi-select-option-focus-box-shadow: #{$form-multi-select-option-focus-box-shadow};
--cui-form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color};
--cui-form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width};
--cui-form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg};
--cui-form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border};
--cui-form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius};
--cui-form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg};
--cui-form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg};
--cui-form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)};
--cui-form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color};
--cui-form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y};
--cui-form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x};
--cui-form-multi-select-tag-bg: #{$form-multi-select-tag-bg};
--cui-form-multi-select-tag-border-width: #{$form-multi-select-tag-border-width};
--cui-form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color};
--cui-form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};
--cui-form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width};
--cui-form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height};
--cui-form-multi-select-tag-delete-icon: #{escape-svg($form-multi-select-tag-delete-icon)};
--cui-form-multi-select-tag-delete-icon-color: #{$form-multi-select-tag-delete-icon-color};
--cui-form-multi-select-tag-delete-icon-hover-color: #{$form-multi-select-tag-delete-icon-hover-color};
--cui-form-multi-select-tag-delete-icon-size: #{$form-multi-select-tag-delete-icon-size};
--cui-form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap};
--cui-form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y};
--cui-form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x};

How to use CSS variables#

const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': 'red',
}
return <CMultiSelect style={vars}>...</CMultiSelect>

SASS variables#

$form-multi-select-zindex:                    1000 !default;
$form-multi-select-font-family:               $input-font-family !default;
$form-multi-select-font-size:                 $input-font-size !default;
$form-multi-select-font-weight:               $input-font-weight !default;
$form-multi-select-line-height:               $input-line-height !default;
$form-multi-select-color:                     $input-color !default;
$form-multi-select-bg:                        $input-bg !default;
$form-multi-select-box-shadow:                $box-shadow-inset !default;

$form-multi-select-border-width:              $input-border-width !default;
$form-multi-select-border-color:              $input-border-color !default;
$form-multi-select-border-radius:             $input-border-radius !default;
$form-multi-select-border-radius-sm:          $input-border-radius-sm !default;
$form-multi-select-border-radius-lg:          $input-border-radius-lg !default;

$form-multi-select-disabled-color:            $input-disabled-color !default;
$form-multi-select-disabled-bg:               $input-disabled-bg !default;
$form-multi-select-disabled-border-color:     $input-disabled-border-color !default;

$form-multi-select-focus-color:               $input-focus-color !default;
$form-multi-select-focus-bg:                  $input-focus-bg !default;
$form-multi-select-focus-border-color:        $input-focus-border-color !default;
$form-multi-select-focus-box-shadow:          $input-btn-focus-box-shadow !default;

$form-multi-select-invalid-border-color:      var(--cui-form-invalid-border-color) !default;
$form-multi-select-valid-border-color:        var(--cui-form-valid-border-color) !default;

$form-multi-select-placeholder-color:         var(--cui-secondary-color) !default;

$form-multi-select-selection-padding-y:       $input-padding-y !default;
$form-multi-select-selection-padding-x:       $input-padding-x !default;
$form-multi-select-selection-tags-gap:        .25rem !default;
$form-multi-select-selection-tags-padding-y:  .25rem !default;
$form-multi-select-selection-tags-padding-x:  .25rem !default;

$form-multi-select-tag-bg:                    var(--cui-secondary-bg) !default;
$form-multi-select-tag-border-width:          var(--cui-border-width) !default;
$form-multi-select-tag-border-color:          var(--cui-border-color) !default;
$form-multi-select-tag-border-radius:         .25rem !default;
$form-multi-select-tag-border-radius-sm:      .125rem !default;
$form-multi-select-tag-border-radius-lg:      .375rem !default;
$form-multi-select-tag-padding-y:             .0625rem !default;
$form-multi-select-tag-padding-x:             .5rem !default;

$form-multi-select-tag-delete-width:             .75rem !default;
$form-multi-select-tag-delete-height:            .75rem !default;
$form-multi-select-tag-delete-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
$form-multi-select-tag-delete-icon-color:        var(--cui-secondary-color) !default;
$form-multi-select-tag-delete-icon-hover-color:  var(--cui-body-color) !default;
$form-multi-select-tag-delete-icon-size:         .5rem !default;

$form-multi-select-cleaner-width:             1.5rem !default;
$form-multi-select-cleaner-height:            1.5rem !default;
$form-multi-select-cleaner-padding-x:         0 !default;
$form-multi-select-cleaner-padding-y:         0 !default;
$form-multi-select-cleaner-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
$form-multi-select-cleaner-icon-color:        var(--cui-tertiary-color) !default;
$form-multi-select-cleaner-icon-hover-color:  var(--cui-body-color) !default;
$form-multi-select-cleaner-icon-size:         .625rem !default;

$form-multi-select-indicator-width:             1.5rem !default;
$form-multi-select-indicator-height:            1.5rem !default;
$form-multi-select-indicator-padding-x:         0 !default;
$form-multi-select-indicator-padding-y:         0 !default;
$form-multi-select-indicator-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
$form-multi-select-indicator-icon-color:        var(--cui-tertiary-color) !default;
$form-multi-select-indicator-icon-hover-color:  var(--cui-body-color) !default;
$form-multi-select-indicator-icon-size:         .75rem !default;

$form-multi-select-dropdown-min-width:        100% !default;
$form-multi-select-dropdown-bg:               var(--cui-body-bg) !default;
$form-multi-select-dropdown-border-color:     var(--cui-border-color) !default;
$form-multi-select-dropdown-border-width:     var(--cui-border-width) !default;
$form-multi-select-dropdown-border-radius:    var(--cui-border-radius) !default;
$form-multi-select-dropdown-box-shadow:       var(--cui-box-shadow) !default;

$form-multi-select-select-all-padding-y:      .5rem !default;
$form-multi-select-select-all-padding-x:      .75rem !default;
$form-multi-select-select-all-color:          var(--cui-body-secondary-color) !default;
$form-multi-select-select-all-bg:             transparent !default;
$form-multi-select-select-all-hover-color:    var(--cui-body-color) !default;
$form-multi-select-select-all-hover-bg:       transparent !default;
$form-multi-select-select-all-border-width:   $input-border-width !default;
$form-multi-select-select-all-border-color:   $input-border-color !default;

$form-multi-select-options-padding-y:         .5rem !default;
$form-multi-select-options-padding-x:         .75rem !default;
$form-multi-select-options-font-size:         $font-size-base !default;
$form-multi-select-options-font-weight:       $font-weight-normal !default;
$form-multi-select-options-color:             var(--cui-body-color) !default;

$form-multi-select-optgroup-label-padding-y:       .5rem !default;
$form-multi-select-optgroup-label-padding-x:       .625rem !default;
$form-multi-select-optgroup-label-font-size:       80% !default;
$form-multi-select-optgroup-label-font-weight:     $font-weight-bold !default;
$form-multi-select-optgroup-label-color:           var(--cui-tertiary-color) !default;
$form-multi-select-optgroup-label-text-transform:  uppercase !default;

$form-multi-select-option-padding-y:               .5rem !default;
$form-multi-select-option-padding-x:               1.25rem !default;
$form-multi-select-option-margin-y:                1px !default;
$form-multi-select-option-margin-x:                0 !default;
$form-multi-select-option-border-width:            $input-border-width !default;
$form-multi-select-option-border-color:            transparent !default;
$form-multi-select-option-border-radius:           var(--cui-border-radius) !default;
$form-multi-select-option-box-shadow:              $box-shadow-inset !default;

$form-multi-select-option-hover-color:             var(--cui-body-color) !default;
$form-multi-select-option-hover-bg:                var(--cui-tertiary-bg) !default;

$form-multi-select-option-focus-box-shadow:        $input-btn-focus-box-shadow !default;

$form-multi-select-option-indicator-width:          1em !default;
$form-multi-select-option-indicator-bg:             $form-check-input-bg !default;
$form-multi-select-option-indicator-border:         $form-check-input-border !default;
$form-multi-select-option-indicator-border-radius:  .25em !default;

$form-multi-select-option-selected-bg:                      var(--cui-secondary-bg) !default;
$form-multi-select-option-selected-indicator-bg:            $form-check-input-checked-bg-color !default;
$form-multi-select-option-selected-indicator-bg-image:      $form-check-input-checked-bg-image !default;
$form-multi-select-option-selected-indicator-border-color:  $form-multi-select-option-selected-indicator-bg !default;

$form-multi-select-option-disabled-color:        var(--cui-secondary-color) !default;

$form-multi-select-font-size-lg:                 $input-font-size-lg !default;
$form-multi-select-selection-padding-y-lg:       $input-padding-y-lg !default;
$form-multi-select-selection-padding-x-lg:       $input-padding-x-lg !default;
$form-multi-select-selection-tags-gap-lg:        .25rem !default;
$form-multi-select-selection-tags-padding-y-lg:  .25rem !default;
$form-multi-select-selection-tags-padding-x-lg:  .25rem !default;
$form-multi-select-tag-padding-y-lg:             .175rem !default;
$form-multi-select-tag-padding-x-lg:             .5rem !default;

$form-multi-select-font-size-sm:                 $input-font-size-sm !default;
$form-multi-select-selection-padding-y-sm:       $input-padding-y-sm !default;
$form-multi-select-selection-padding-x-sm:       $input-padding-x-sm !default;
$form-multi-select-selection-tags-gap-sm:        .125rem !default;
$form-multi-select-selection-tags-padding-y-sm:  .0625rem !default;
$form-multi-select-selection-tags-padding-x-sm:  .125rem !default;
$form-multi-select-tag-padding-y-sm:             .075rem !default;
$form-multi-select-tag-padding-x-sm:             .5rem !default;

API#

CMultiSelect#

import { CMultiSelect } from '@coreui/react-pro'
// or
import CMultiSelect from '@coreui/react-pro/src/components/multi-select/CMultiSelect'

Property	Description	Type	Default
allowCreateOptions 4.11.0+	Allow users to create options if they are not in the list of options.	`boolean`	-
className	A string of all className you want applied to the base component.	`string`	-
cleaner	Enables selection cleaner element.	`boolean`	true
clearSearchOnSelect 4.11.0+	Clear current search on selecting an item.	`boolean`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
feedback 4.2.0+	Provide valuable, actionable feedback.	`ReactNode`	-
feedbackInvalid 4.2.0+	Provide valuable, actionable feedback.	`ReactNode`	-
feedbackValid 4.2.0+	Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.	`ReactNode`	-
id	The id global attribute defines an identifier (ID) that must be unique in the whole document. The name and id attributes for the native select element are generated based on the `id` property: -	`string`	-
invalid	Set component validation state to invalid.	`boolean`	-
label 4.2.0+	Add a caption for a component.	`ReactNode`	-
loading 4.11.0+	When set, the options list will have a loading style: loading spinner and reduced opacity.	`boolean`	-
multiple	It specifies that multiple options can be selected at once.	`boolean`	true
onChange	Execute a function when a user changes the selected option.	`(selected: Option[]) => void`	-
onFilterChange 4.8.0+	Execute a function when the filter value changed.	`(value: string) => void`	-
onHide	The callback is fired when the Multi Select component requests to be hidden.	`() => void`	-
onShow	The callback is fired when the Multi Select component requests to be shown.	`() => void`	-
options	List of option elements.	`(Option` \| `OptionsGroup)[]`	-
optionsGroupsTemplate 4.12.0+	Custom template for options groups.	`(option: OptionsGroup) => ReactNode`	-
optionsMaxHeight	Sets maxHeight of options list.	`string` \| `number`	auto
optionsStyle	Sets option style.	`'text'` \| `'checkbox'`	checkbox
optionsTemplate 4.12.0+	Custom template for options.	`(option: Option) => ReactNode`	-
placeholder	Specifies a short hint that is visible in the search input.	`string`	Select...
required	When it is present, it indicates that the user must choose a value before submitting the form.	`boolean`	-
search	Enables search input element.	`boolean` \| `'external'`	true
searchNoResultsLabel	Sets the label for no results when filtering.	`ReactNode`	No results found
selectAll	Enables select all button.	`boolean`	true
selectAllLabel	Sets the select all button label.	`ReactNode`	Select all options
selectionType	Sets the selection style.	`'text'` \| `'counter'` \| `'tags'`	tags
selectionTypeCounterText	Sets the counter selection label.	`string`	item(s) selected
size	Size the component small or large.	`'sm'` \| `'lg'`	-
text 4.2.0+	Add helper text to the component.	`ReactNode`	-
tooltipFeedback 4.2.0+	Display validation feedback in a styled tooltip.	`boolean`	-
valid	Set component validation state to valid.	`boolean`	-
virtualScroller 4.8.0+	Enable virtual scroller for the options list.	`boolean`	-
visible	Toggle the visibility of multi select dropdown.	`boolean`	false
visibleItems 4.8.0+	Amount of visible items when virtualScroller is set to `true`.	`number`	10

On this page