If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️Star🙏

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#

Tags#

Text#

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.