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#

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
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} />
Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
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#

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js

Tags#

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js

Text#

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js

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