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:
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} />
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" />
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" />
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" />
Add the disabled
boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.
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)
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};2122--cui-form-multi-select-indicator: #{escape-svg($form-multi-select-indicator)};23--cui-form-multi-select-indicator-padding: #{$form-multi-select-indicator-padding};2425--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)};3233--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};3637--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};4546--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};5152--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};5556--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};7071--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};
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CMultiSelect style={vars}>...</CMultiSelect>
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;1011$form-multi-select-bg-position: right $form-multi-select-padding-x center;12$form-multi-select-bg-size: 16px 12px; // In pixels because image dimensions13$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 indicator15$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>");1718$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);2223$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;2829$form-multi-select-selection-tags-padding-y: .125rem;30$form-multi-select-selection-tags-padding-x: .125rem;3132$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;4041$form-multi-select-search-color: $input-color;42$form-multi-select-search-bg: $input-bg;43$form-multi-select-search-border-radius: $border-radius;4445$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;5657$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;6566$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;7576$form-multi-select-optgroup-label-font-weight: $font-weight-bold;77$form-multi-select-optgroup-label-color: $disabled;7879$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;8283$form-multi-select-option-hover-color: shift-color($gray-900, 5);84$form-multi-select-option-hover-bg: rgba($gray-100, .5);8586$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;9091$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;9596$form-multi-select-option-disabled-color: $gray-600;9798$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;107108$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;
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 |