Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
Give us a star ⭐️ on Github.

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.

Basic example#

1const options = [
2  {
3    value: 0,
4    text: 'Angular',
5  },
6  {
7    value: 1,
8    text: 'Bootstrap',
9  },
10  {
11    value: 2,
12    text: 'React.js',
13  },
14  {
15    value: 3,
16    text: 'Vue.js',
17  },
18  {
19    label: 'backend',
20    options: [
21      {
22        value: 4,
23        text: 'Django',
24      },
25      {
26        value: 5,
27        text: 'Laravel',
28      },
29      {
30        value: 6,
31        text: 'Node.js',
32      },
33    ],
34  },
35]
36return <CMultiSelect options={options} />

1const options = [
2  {
3    value: 0,
4    text: 'Angular',
5  },
6  {
7    value: 1,
8    text: 'Bootstrap',
9  },
10  {
11    value: 2,
12    text: 'React.js',
13  },
14  {
15    value: 3,
16    text: 'Vue.js',
17  },
18  {
19    label: 'backend',
20    options: [
21      {
22        value: 4,
23        text: 'Django',
24      },
25      {
26        value: 5,
27        text: 'Laravel',
28      },
29      {
30        value: 6,
31        text: 'Node.js',
32      },
33    ],
34  },
35]
36return <CMultiSelect options={options} />

Selection types#

Counter#

1const options = [
2  {
3    value: 0,
4    text: 'Angular',
5    selected: true,
6  },
7  {
8    value: 1,
9    text: 'Bootstrap',
10    selected: true,
11    disabled: true,
12  },
13  {
14    value: 2,
15    text: 'React.js',
16  },
17  {
18    value: 3,
19    text: 'Vue.js',
20  },
21  {
22    label: 'backend',
23    options: [
24      {
25        value: 4,
26        text: 'Django',
27      },
28      {
29        value: 5,
30        text: 'Laravel',
31        selected: true,
32      },
33      {
34        value: 6,
35        text: 'Node.js',
36      },
37    ],
38  },
39]
40return <CMultiSelect options={options} selectionType="counter" />

Tags#

1const options = [
2  {
3    value: 0,
4    text: 'Angular',
5    selected: true,
6  },
7  {
8    value: 1,
9    text: 'Bootstrap',
10    selected: true,
11    disabled: true,
12  },
13  {
14    value: 2,
15    text: 'React.js',
16  },
17  {
18    value: 3,
19    text: 'Vue.js',
20  },
21  {
22    label: 'backend',
23    options: [
24      {
25        value: 4,
26        text: 'Django',
27      },
28      {
29        value: 5,
30        text: 'Laravel',
31        selected: true,
32      },
33      {
34        value: 6,
35        text: 'Node.js',
36      },
37    ],
38  },
39]
40return <CMultiSelect options={options} selectionType="tags" />

Text#

1const options = [
2  {
3    value: 0,
4    text: 'Angular',
5    selected: true,
6  },
7  {
8    value: 1,
9    text: 'Bootstrap',
10    selected: true,
11    disabled: true,
12  },
13  {
14    value: 2,
15    text: 'React.js',
16  },
17  {
18    value: 3,
19    text: 'Vue.js',
20  },
21  {
22    label: 'backend',
23    options: [
24      {
25        value: 4,
26        text: 'Django',
27      },
28      {
29        value: 5,
30        text: 'Laravel',
31        selected: true,
32      },
33      {
34        value: 6,
35        text: 'Node.js',
36      },
37    ],
38  },
39]
40return <CMultiSelect options={options} selectionType="text" />

Disabled#

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

Sizing#

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

1const options = [
2  {
3    value: 0,
4    text: 'Angular',
5    selected: true,
6  },
7  {
8    value: 1,
9    text: 'Bootstrap',
10  },
11  {
12    value: 2,
13    text: 'React.js',
14  },
15  {
16    value: 3,
17    text: 'Vue.js',
18  },
19  {
20    label: 'backend',
21    options: [
22      {
23        value: 4,
24        text: 'Django',
25      },
26      {
27        value: 5,
28        text: 'Laravel',
29      },
30      {
31        value: 6,
32        text: 'Node.js',
33      },
34    ],
35  },
36]
37return (
38  <CRow>
39    <CCol md={6} className="mb-3">
40      <CMultiSelect options={options} selectionType="counter" size="lg" />
41    </CCol>
42    <CCol md={6} className="mb-3">
43      <CMultiSelect options={options} size="lg" />
44    </CCol>
45    <CCol md={6}>
46      <CMultiSelect options={options} selectionType="counter" size="sm" />
47    </CCol>
48    <CCol md={6}>
49      <CMultiSelect options={options} size="sm" />
50    </CCol>
51  </CRow>
52)

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.

1--cui-form-multi-select-padding-y: #{$form-multi-select-padding-y};
2--cui-form-multi-select-padding-x: #{$form-multi-select-padding-x};
3--cui-form-multi-select-font-family: #{$form-multi-select-font-family};
4--cui-form-multi-select-font-size: #{$form-multi-select-font-size};
5--cui-form-multi-select-font-weight: #{$form-multi-select-font-weight};
6--cui-form-multi-select-line-height: #{$form-multi-select-line-height};
7--cui-form-multi-select-color: #{$form-multi-select-color};
8--cui-form-multi-select-bg: #{$form-multi-select-bg};
9--cui-form-multi-select-bg-position: #{$form-multi-select-bg-position};
10--cui-form-multi-select-bg-size: #{$form-multi-select-bg-size};
11--cui-form-multi-select-border-color: #{$form-multi-select-border-color};
12--cui-form-multi-select-border: #{$form-multi-select-border-width} solid var(--cui-form-multi-select-border-color);
13--cui-form-multi-select-border-radius: #{$form-multi-select-border-radius};
14--cui-form-multi-select-disabled-color: #{$form-multi-select-disabled-color};
15--cui-form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg};
16--cui-form-multi-select-focus-color: #{$form-multi-select-focus-color};
17--cui-form-multi-select-focus-bg: #{$form-multi-select-focus-bg};
18--cui-form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color};
19--cui-form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y};
20--cui-form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x};
21
22--cui-form-multi-select-indicator: #{escape-svg($form-multi-select-indicator)};
23--cui-form-multi-select-indicator-padding: #{$form-multi-select-indicator-padding};
24
25--cui-form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width};
26--cui-form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height};
27--cui-form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y};
28--cui-form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x};
29--cui-form-multi-select-cleaner-bg: #{escape-svg($form-multi-select-cleaner-bg)};
30--cui-form-multi-select-cleaner-hover-bg: #{escape-svg($form-multi-select-cleaner-hover-bg)};
31--cui-form-multi-select-cleaner-focus-bg: #{escape-svg($form-multi-select-cleaner-focus-bg)};
32
33--cui-form-multi-select-search-color: #{$form-multi-select-search-color};
34--cui-form-multi-select-search-bg: #{$form-multi-select-search-bg};
35--cui-form-multi-select-search-border-radius: #{$form-multi-select-search-border-radius};
36
37--cui-form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y};
38--cui-form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x};
39--cui-form-multi-select-select-all-color: #{$form-multi-select-select-all-color};
40--cui-form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg};
41--cui-form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color};
42--cui-form-multi-select-select-all-border: #{$form-multi-select-select-all-border-width} solid var(--cui-form-multi-select-select-all-border-color);
43--cui-form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color};
44--cui-form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg};
45
46--cui-form-multi-select-options-margin-top: #{$form-multi-select-options-margin-top};
47--cui-form-multi-select-options-bg: #{$form-multi-select-options-bg};
48--cui-form-multi-select-options-border-color: #{$form-multi-select-options-border-color};
49--cui-form-multi-select-options-border: #{$form-multi-select-options-border-width} solid var(--cui-form-multi-select-options-border-color);
50--cui-form-multi-select-options-border-radius: #{$form-multi-select-options-border-radius};
51
52--cui-form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y};
53--cui-form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x};
54--cui-form-multi-select-options-color: #{$form-multi-select-options-color};
55
56--cui-form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y};
57--cui-form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x};
58--cui-form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius};
59--cui-form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color};
60--cui-form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg};
61--cui-form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color};
62--cui-form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width};
63--cui-form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg};
64--cui-form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border};
65--cui-form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius};
66--cui-form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg};
67--cui-form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg};
68--cui-form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)};
69--cui-form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color};
70
71--cui-form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y};
72--cui-form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x};
73--cui-form-multi-select-tag-margin-y: #{$form-multi-select-tag-margin-y};
74--cui-form-multi-select-tag-margin-x: #{$form-multi-select-tag-margin-x};
75--cui-form-multi-select-tag-bg: #{$form-multi-select-tag-bg};
76--cui-form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color};
77--cui-form-multi-select-tag-border: #{$form-multi-select-tag-border-width} solid var(--cui-form-multi-select-tag-border-color);
78--cui-form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};

How to use CSS variables#

1const vars = { 
2  '--my-css-var': 10,
3  '--my-another-css-var': "red" 
4}
5return <CMultiSelect style={vars}>...</CMultiSelect>

SASS variables#

1$form-multi-select-padding-y:               $input-padding-y;
2$form-multi-select-padding-x:               $input-padding-x;
3$form-multi-select-font-family:             $input-font-family;
4$form-multi-select-font-size:               $input-font-size;
5$form-multi-select-font-weight:             $input-font-weight;
6$form-multi-select-line-height:             $input-line-height;
7$form-multi-select-color:                   $input-color;
8$form-multi-select-disabled-color:          $gray-600;
9$form-multi-select-bg:                      $input-bg;
10
11$form-multi-select-bg-position:             right $form-multi-select-padding-x center;
12$form-multi-select-bg-size:                 16px 12px; // In pixels because image dimensions
13$form-multi-select-disabled-bg:             $gray-200;
14$form-multi-select-indicator-padding:       $form-multi-select-padding-x * 3; // Extra padding to account for the presence of the background-image based indicator
15$form-multi-select-indicator-color:         $gray-800;
16$form-multi-select-indicator:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-multi-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
17
18$form-multi-select-border-width:            $input-border-width;
19$form-multi-select-border-color:            $input-border-color;
20$form-multi-select-border-radius:           $border-radius;
21$form-multi-select-box-shadow:              inset 0 1px 2px rgba($black, .075);
22
23$form-multi-select-focus-width:             $input-focus-width;
24$form-multi-select-focus-color:             $input-color;
25$form-multi-select-focus-bg:                $input-bg;
26$form-multi-select-focus-border-color:      shift-color($component-active-bg, -25);
27$form-multi-select-focus-box-shadow:        0 0 0 $form-multi-select-focus-width $input-btn-focus-color;
28
29$form-multi-select-selection-tags-padding-y:  .125rem;
30$form-multi-select-selection-tags-padding-x:  .125rem;
31
32$form-multi-select-tag-bg:             $light;
33$form-multi-select-tag-border-width:   $border-width;
34$form-multi-select-tag-border-color:   $border-color;
35$form-multi-select-tag-border-radius:  $border-radius;
36$form-multi-select-tag-margin-y:       .125rem;
37$form-multi-select-tag-margin-x:       .125rem;
38$form-multi-select-tag-padding-y:      subtract(($form-multi-select-padding-y - $form-multi-select-selection-tags-padding-y - $form-multi-select-tag-margin-y), $form-multi-select-tag-border-width);
39$form-multi-select-tag-padding-x:      .5rem;
40
41$form-multi-select-search-color:          $input-color;
42$form-multi-select-search-bg:             $input-bg;
43$form-multi-select-search-border-radius:  $border-radius;
44
45$form-multi-select-cleaner-width:         .75rem;
46$form-multi-select-cleaner-height:        .75rem;
47$form-multi-select-cleaner-padding-x:     .75rem;
48$form-multi-select-cleaner-padding-y:     .5rem;
49$form-multi-select-cleaner-color:         $medium-emphasis;
50$form-multi-select-cleaner-bg:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-color}'><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>");
51$form-multi-select-cleaner-hover-color:   $high-emphasis;
52$form-multi-select-cleaner-hover-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-hover-color}'><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>");
53$form-multi-select-cleaner-focus-color:   $high-emphasis;
54$form-multi-select-cleaner-focus-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-focus-color}'><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>");
55$form-multi-select-cleaner-border-color:  $input-border-color;
56
57$form-multi-select-select-all-padding-y:     .5rem;
58$form-multi-select-select-all-padding-x:     .75rem;
59$form-multi-select-select-all-color:         $medium-emphasis;
60$form-multi-select-select-all-bg:            transparent;
61$form-multi-select-select-all-hover-color:   $high-emphasis;
62$form-multi-select-select-all-hover-bg:      transparent;
63$form-multi-select-select-all-border-width:  $input-border-width;
64$form-multi-select-select-all-border-color:  $input-border-color;
65
66$form-multi-select-options-padding-y:      .5rem;
67$form-multi-select-options-padding-x:      .75rem;
68$form-multi-select-options-margin-top:     .625rem;
69$form-multi-select-options-font-size:      $font-size-base;
70$form-multi-select-options-color:          $body-color;
71$form-multi-select-options-bg:             $white;
72$form-multi-select-options-border-color:   $border-color;
73$form-multi-select-options-border-width:   $border-width;
74$form-multi-select-options-border-radius:  $border-radius;
75
76$form-multi-select-optgroup-label-font-weight:  $font-weight-bold;
77$form-multi-select-optgroup-label-color:        $disabled;
78
79$form-multi-select-option-padding-y:        .5rem;
80$form-multi-select-option-padding-x:        1.25rem;
81$form-multi-select-option-border-radius:    $border-radius;
82
83$form-multi-select-option-hover-color:     shift-color($gray-900, 5);
84$form-multi-select-option-hover-bg:        rgba($gray-100, .5);
85
86$form-multi-select-option-indicator-width:          1em;
87$form-multi-select-option-indicator-bg:             $form-check-input-bg;
88$form-multi-select-option-indicator-border:         $form-check-input-border;
89$form-multi-select-option-indicator-border-radius:  .25em;
90
91$form-multi-select-option-selected-bg:                      $light;
92$form-multi-select-option-selected-indicator-bg:            $form-check-input-checked-bg-color;
93$form-multi-select-option-selected-indicator-bg-image:      $form-check-input-checked-bg-image;
94$form-multi-select-option-selected-indicator-border-color:  $form-multi-select-option-selected-indicator-bg;
95
96$form-multi-select-option-disabled-color:  $gray-600;
97
98$form-multi-select-padding-y-lg:                 $input-padding-y-lg;
99$form-multi-select-padding-x-lg:                 $input-padding-x-lg;
100$form-multi-select-font-size-lg:                 $input-font-size-lg;
101$form-multi-select-selection-tags-padding-y-lg:  .125rem;
102$form-multi-select-selection-tags-padding-x-lg:  .125rem;
103$form-multi-select-tag-margin-y-lg:              .125rem;
104$form-multi-select-tag-margin-x-lg:              .125rem;
105$form-multi-select-tag-padding-y-lg:             subtract(($form-multi-select-padding-y-lg - $form-multi-select-selection-tags-padding-y-lg - $form-multi-select-tag-margin-y-lg), $form-multi-select-tag-border-width);
106$form-multi-select-tag-padding-x-lg:             .5rem;
107
108$form-multi-select-padding-y-sm:                 $input-padding-y-sm;
109$form-multi-select-padding-x-sm:                 $input-padding-x-sm;
110$form-multi-select-font-size-sm:                 $input-font-size-sm;
111$form-multi-select-selection-tags-padding-y-sm:  .0675rem;
112$form-multi-select-selection-tags-padding-x-sm:  .0675rem;
113$form-multi-select-tag-margin-y-sm:              .0675rem;
114$form-multi-select-tag-margin-x-sm:              .0675rem;
115$form-multi-select-tag-padding-y-sm:             subtract(($form-multi-select-padding-y-sm - $form-multi-select-selection-tags-padding-y-sm - $form-multi-select-tag-margin-y-sm), $form-multi-select-tag-border-width);
116$form-multi-select-tag-padding-x-sm:             .5rem;

API#

CMultiSelect#

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

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
cleaner	Enables selection cleaner element.	`boolean`	true
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`	-
options	List of option elements.	`Option[]`	-
optionsMaxHeight	Sets maxHeight of options list.	`string` \| `number`	auto
optionsStyle	Sets option style.	`'checkbox'` \| `'text'`	checkbox
placeholder	Specifies a short hint that is visible in the search input.	`string`	Select...
search	Enables search input element.	`boolean`	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
visible	Toggle the visibility of multi select dropdown.	`boolean`	false

On this page

CoreUI for React is Open Source UI Components Library for React.js.

Code licensed MIT, docs CC BY 3.0.