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'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
cleanerEnables selection cleaner element.booleantrue
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.'checkbox' | 'text'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
visibleToggle the visibility of multi select dropdown.booleanfalse