Customize the native <select>s with a powerful Multi-Select component that changes the element’s initial appearance and brings some new functionalities.
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} />
1import { CMultiSelect } from '@coreui/react-pro'2// or3import 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 |