Are you ready for Cyber Week Deals?

Up to 70% discount for CoreUI PRO Admin Templates and UI Components.

This year we prepared a limited Cyber Week offer for our clients and users. The first 100 people can get our products with up to 70% discount.

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#

Please select your framework.
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} label="Framework" text="Please select your framework." />
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" />

Single Selection#

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

1const options = [
2 {
3 value: 0,
4 text: 'Angular',
5 },
6 {
7 value: 1,
8 text: 'Bootstrap',
9 disabled: true,
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 <CMultiSelect multiple={false} options={options} />

Disabled#

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

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 disabled options={options} />

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'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
cleanerEnables selection cleaner element.booleantrue
disabledToggle the disabled state for the component.boolean-
feedback
4.6.0+
Provide valuable, actionable feedback.ReactNode-
feedbackInvalid
4.6.0+
Provide valuable, actionable feedback.ReactNode-
feedbackValid
4.6.0+
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.ReactNode-
invalidSet component validation state to invalid.boolean-
label
4.6.0+
Add a caption for a component.ReactNode-
multipleIt specifies that multiple options can be selected at once.booleantrue
onChangeExecute a function when a user changes the selected option.(selected: Option[]) => void-
optionsList of option elements.Option[]-
optionsMaxHeightSets maxHeight of options list.string | numberauto
optionsStyleSets option style.'text' | 'checkbox'checkbox
placeholderSpecifies a short hint that is visible in the search input.stringSelect...
searchEnables search input element.booleantrue
searchNoResultsLabelSets the label for no results when filtering.ReactNodeNo results found
selectAllEnables select all button.booleantrue
selectAllLabelSets the select all button label.ReactNodeSelect all options
selectionTypeSets the selection style.'text' | 'counter' | 'tags'tags
selectionTypeCounterTextSets the counter selection label.stringitem(s) selected
sizeSize the component small or large.'sm' | 'lg'-
text
4.6.0+
Add helper text to the component.ReactNode-
tooltipFeedback
4.6.0+
Display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-
visibleToggle the visibility of multi select dropdown.booleanfalse