Angular Multi Select

On this page

CoreUI PRO Component

## Examples

## Modes ### Allow create options The `allowCreateOptions` property allows users to create new options in addition to selecting pre-existing ones from a list. When this property is set to true, the user can type in a new option in the search input field of the multiselect component. If the option does not exist in the list, it will be created and added to the list of available options. This can be useful when the list of available options is not comprehensive or when the user needs to add and select an option that is not already available.

It's worth noting that this feature may not always be relevant, depending on the specific use case of the multiselect component. In some cases, it may be preferable to restrict the user to selecting only pre-existing options, while in other cases, allowing for the creation of new options may be essential. It's important to consider the specific requirements of your application when deciding whether to enable this feature.

### Clear search on select The `clearSearchOnSelect` property is a Boolean attribute that can be used with the MultiSelect component in the CoreUI Angular library. When `clearSearchOnSelect` is set to `true`, the search input field in the MultiSelect component will be cleared as soon as the user selects an option from the dropdown list. This means that the search query will be reset and the user will be able to start a new search immediately. By default, `clearSearchOnSelect` is set to `false`, which means that the search input field will retain the user's search query even after an option has been selected. This can be useful in situations where the user needs to select multiple options from the dropdown list that match the same search query. To use the `clearSearchOnSelect` property with the MultiSelect component in the CoreUI Angular library, you simply need to set it to `true` or `false` as appropriate in your code. In the following example, the `clearSearchOnSelect` property is set to `true`. The search input field will be cleared as soon as the user selects an option from the dropdown list.

## Selection types ### Counter

### Tags

### Text

## Single selection Set the `multiple` boolean property to `false` and allow select only one element.

## 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.

## External search Use `(searchValueChange)` to handle external search.

## Custom search Pass `SearchFn` callback to the `search` prop for search customization.

## Virtual scroller Display large selection lists in a performant way by only rendering the options in view.

## Forms CoreUI MultiSelect component works with native html form method as is. Angular handles user input through reactive and template-driven forms. CoreUI MultiSelect supports both approaches. If no `value` prop is included for `c-multi-select-option`, the value defaults to the text contained inside the element. ### Reactive

### Template-driven

"); $form-multi-select-tag-delete-icon-color: var(--#{$prefix}secondary-color); $form-multi-select-tag-delete-icon-hover-color: var(--#{$prefix}body-color); $form-multi-select-tag-delete-icon-size: .5rem; $form-multi-select-cleaner-width: 1.5rem; $form-multi-select-cleaner-height: 1.5rem; $form-multi-select-cleaner-padding-x: 0; $form-multi-select-cleaner-padding-y: 0; $form-multi-select-cleaner-icon: url("data:image/svg+xml,"); $form-multi-select-cleaner-icon-color: var(--#{$prefix}tertiary-color); $form-multi-select-cleaner-icon-hover-color: var(--#{$prefix}body-color); $form-multi-select-cleaner-icon-size: .625rem; $form-multi-select-indicator-width: 1.5rem; $form-multi-select-indicator-height: 1.5rem; $form-multi-select-indicator-padding-x: 0; $form-multi-select-indicator-padding-y: 0; $form-multi-select-indicator-icon: url("data:image/svg+xml,"); $form-multi-select-indicator-icon-color: var(--#{$prefix}tertiary-color); $form-multi-select-indicator-icon-hover-color: var(--#{$prefix}body-color); $form-multi-select-indicator-icon-size: .75rem; $form-multi-select-dropdown-min-width: 100%; $form-multi-select-dropdown-bg: var(--#{$prefix}body-bg); $form-multi-select-dropdown-border-color: var(--#{$prefix}border-color); $form-multi-select-dropdown-border-width: var(--#{$prefix}border-width); $form-multi-select-dropdown-border-radius: var(--#{$prefix}border-radius); $form-multi-select-dropdown-box-shadow: var(--#{$prefix}box-shadow); $form-multi-select-select-all-padding-y: .5rem; $form-multi-select-select-all-padding-x: .75rem; $form-multi-select-select-all-color: var(--#{$prefix}body-secondary-color); $form-multi-select-select-all-bg: transparent; $form-multi-select-select-all-hover-color: var(--#{$prefix}body-color); $form-multi-select-select-all-hover-bg: transparent; $form-multi-select-select-all-border-width: $input-border-width; $form-multi-select-select-all-border-color: $input-border-color; $form-multi-select-options-padding-y: .5rem; $form-multi-select-options-padding-x: .75rem; $form-multi-select-options-font-size: $font-size-base; $form-multi-select-options-font-weight: $font-weight-normal; $form-multi-select-options-color: var(--#{$prefix}body-color); $form-multi-select-optgroup-label-padding-y: .5rem; $form-multi-select-optgroup-label-padding-x: .625rem; $form-multi-select-optgroup-label-font-size: 80%; $form-multi-select-optgroup-label-font-weight: $font-weight-bold; $form-multi-select-optgroup-label-color: var(--#{$prefix}tertiary-color); $form-multi-select-optgroup-label-text-transform: uppercase; $form-multi-select-option-padding-y: .5rem; $form-multi-select-option-padding-x: 1.25rem; $form-multi-select-option-margin-y: 1px; $form-multi-select-option-margin-x: 0; $form-multi-select-option-border-width: $input-border-width; $form-multi-select-option-border-color: transparent; $form-multi-select-option-border-radius: var(--#{$prefix}border-radius); $form-multi-select-option-box-shadow: $box-shadow-inset; $form-multi-select-option-hover-color: var(--#{$prefix}body-color); $form-multi-select-option-hover-bg: var(--#{$prefix}tertiary-bg); $form-multi-select-option-focus-box-shadow: $input-btn-focus-box-shadow; $form-multi-select-option-indicator-width: 1em; $form-multi-select-option-indicator-bg: $form-check-input-bg; $form-multi-select-option-indicator-border: $form-check-input-border; $form-multi-select-option-indicator-border-radius: .25em; $form-multi-select-option-selected-bg: var(--#{$prefix}secondary-bg); $form-multi-select-option-selected-indicator-bg: $form-check-input-checked-bg-color; $form-multi-select-option-selected-indicator-bg-image: $form-check-input-checked-bg-image; $form-multi-select-option-selected-indicator-border-color: $form-multi-select-option-selected-indicator-bg; $form-multi-select-option-disabled-color: var(--#{$prefix}secondary-color); $form-multi-select-font-size-lg: $input-font-size-lg; $form-multi-select-selection-padding-y-lg: $input-padding-y-lg; $form-multi-select-selection-padding-x-lg: $input-padding-x-lg; $form-multi-select-selection-tags-gap-lg: .25rem; $form-multi-select-selection-tags-padding-y-lg: .25rem; $form-multi-select-selection-tags-padding-x-lg: .25rem; $form-multi-select-tag-padding-y-lg: .175rem; $form-multi-select-tag-padding-x-lg: .5rem; $form-multi-select-font-size-sm: $input-font-size-sm; $form-multi-select-selection-padding-y-sm: $input-padding-y-sm; $form-multi-select-selection-padding-x-sm: $input-padding-x-sm; $form-multi-select-selection-tags-gap-sm: .125rem; $form-multi-select-selection-tags-padding-y-sm: .0625rem; $form-multi-select-selection-tags-padding-x-sm: .125rem; $form-multi-select-tag-padding-y-sm: .075rem; $form-multi-select-tag-padding-x-sm: .5rem; ```

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `allowCreateOptions`

4.5.15+

4.7.4+

4.5.15+

4.5.5+

4.4.12+

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `valueChange` | Event emitted on `value` change | `string \| number \| (string \| number)[]` | | `visibleChange` | Event emitted on `visible` change | `boolean` | | `searchValueChange` | Event emitted on `searchValue` change | `string` |

--- ### c-multi-select-option _component_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `disabled` | Disables option element | `boolean` |_false_| | `id` | Html id attribute for option | `string` |_autogenerated_| | `label` | Option label | `string` |_undefined_| | `optionsStyle` | Option style | `checkbox` \| `text` |_checkbox_| | `role` | Role for option element | `string` |_option_| | `selected` | Selects option element | `boolean` |_false_| | `value` | Option value
`number` type allowed since

4.7.5+

| `string \| number` |_undefined_|

--- ### c-multi-select-optgroup _component_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `disabled` | Disables all options in optgroup | `boolean` |_false_| | `label` | Options group label | `string` |_undefined_|