
Angular Multi Select Component
Customize the native `select` with a powerful CoreUI **Multi-Select** component that changes initial element appearance and brings some new functionalities.
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.
```scss --#{$prefix}form-multi-select-zindex: #{$form-multi-select-zindex}; --#{$prefix}form-multi-select-font-family: #{$form-multi-select-font-family}; --#{$prefix}form-multi-select-font-size: #{$form-multi-select-font-size}; --#{$prefix}form-multi-select-font-weight: #{$form-multi-select-font-weight}; --#{$prefix}form-multi-select-line-height: #{$form-multi-select-line-height}; --#{$prefix}form-multi-select-color: #{$form-multi-select-color}; --#{$prefix}form-multi-select-bg: #{$form-multi-select-bg}; --#{$prefix}form-multi-select-box-shadow: #{$form-multi-select-box-shadow}; --#{$prefix}form-multi-select-border-width: #{$form-multi-select-border-width}; --#{$prefix}form-multi-select-border-color: #{$form-multi-select-border-color}; --#{$prefix}form-multi-select-border-radius: #{$form-multi-select-border-radius}; --#{$prefix}form-multi-select-disabled-color: #{$form-multi-select-disabled-color}; --#{$prefix}form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg}; --#{$prefix}form-multi-select-disabled-border-color: #{$form-multi-select-disabled-border-color}; --#{$prefix}form-multi-select-focus-color: #{$form-multi-select-focus-color}; --#{$prefix}form-multi-select-focus-bg: #{$form-multi-select-focus-bg}; --#{$prefix}form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color}; --#{$prefix}form-multi-select-focus-box-shadow: #{$form-multi-select-focus-box-shadow}; --#{$prefix}form-multi-select-placeholder-color: #{$form-multi-select-placeholder-color}; --#{$prefix}form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y}; --#{$prefix}form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x}; --#{$prefix}form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width}; --#{$prefix}form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height}; --#{$prefix}form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y}; --#{$prefix}form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x}; --#{$prefix}form-multi-select-cleaner-icon: #{escape-svg($form-multi-select-cleaner-icon)}; --#{$prefix}form-multi-select-cleaner-icon-color: #{$form-multi-select-cleaner-icon-color}; --#{$prefix}form-multi-select-cleaner-icon-hover-color: #{$form-multi-select-cleaner-icon-hover-color}; --#{$prefix}form-multi-select-cleaner-icon-size: #{$form-multi-select-cleaner-icon-size}; --#{$prefix}form-multi-select-indicator-width: #{$form-multi-select-indicator-width}; --#{$prefix}form-multi-select-indicator-height: #{$form-multi-select-indicator-height}; --#{$prefix}form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y}; --#{$prefix}form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x}; --#{$prefix}form-multi-select-indicator-icon: #{escape-svg($form-multi-select-indicator-icon)}; --#{$prefix}form-multi-select-indicator-icon-color: #{$form-multi-select-indicator-icon-color}; --#{$prefix}form-multi-select-indicator-icon-hover-color: #{$form-multi-select-indicator-icon-hover-color}; --#{$prefix}form-multi-select-indicator-icon-size: #{$form-multi-select-indicator-icon-size}; --#{$prefix}form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y}; --#{$prefix}form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x}; --#{$prefix}form-multi-select-select-all-color: #{$form-multi-select-select-all-color}; --#{$prefix}form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg}; --#{$prefix}form-multi-select-select-all-border-width: #{$form-multi-select-select-all-border-width}; --#{$prefix}form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color}; --#{$prefix}form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color}; --#{$prefix}form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg}; --#{$prefix}form-multi-select-dropdown-min-width: #{$form-multi-select-dropdown-min-width}; --#{$prefix}form-multi-select-dropdown-bg: #{$form-multi-select-dropdown-bg}; --#{$prefix}form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width}; --#{$prefix}form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color}; --#{$prefix}form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius}; --#{$prefix}form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow}; --#{$prefix}form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y}; --#{$prefix}form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x}; --#{$prefix}form-multi-select-options-font-size: #{$form-multi-select-options-font-size}; --#{$prefix}form-multi-select-options-font-weight: #{$form-multi-select-options-font-weight}; --#{$prefix}form-multi-select-options-color: #{$form-multi-select-options-color}; --#{$prefix}form-multi-select-optgroup-label-padding-y: #{$form-multi-select-optgroup-label-padding-y}; --#{$prefix}form-multi-select-optgroup-label-padding-x: #{$form-multi-select-optgroup-label-padding-x}; --#{$prefix}form-multi-select-optgroup-label-font-size: #{$form-multi-select-optgroup-label-font-size}; --#{$prefix}form-multi-select-optgroup-label-font-weight: #{$form-multi-select-optgroup-label-font-weight}; --#{$prefix}form-multi-select-optgroup-label-color: #{$form-multi-select-optgroup-label-color}; --#{$prefix}form-multi-select-optgroup-label-text-transform: #{$form-multi-select-optgroup-label-text-transform}; --#{$prefix}form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y}; --#{$prefix}form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x}; --#{$prefix}form-multi-select-option-margin-y: #{$form-multi-select-option-margin-y}; --#{$prefix}form-multi-select-option-margin-x: #{$form-multi-select-option-margin-x}; --#{$prefix}form-multi-select-option-border-width: #{$form-multi-select-option-border-width}; --#{$prefix}form-multi-select-option-border-color: #{$form-multi-select-option-border-color}; --#{$prefix}form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius}; --#{$prefix}form-multi-select-option-box-shadow: #{$form-multi-select-option-box-shadow}; --#{$prefix}form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color}; --#{$prefix}form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg}; --#{$prefix}form-multi-select-option-focus-box-shadow: #{$form-multi-select-option-focus-box-shadow}; --#{$prefix}form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color}; --#{$prefix}form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width}; --#{$prefix}form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg}; --#{$prefix}form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border}; --#{$prefix}form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius}; --#{$prefix}form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg}; --#{$prefix}form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg}; --#{$prefix}form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)}; --#{$prefix}form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color}; --#{$prefix}form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y}; --#{$prefix}form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x}; --#{$prefix}form-multi-select-tag-bg: #{$form-multi-select-tag-bg}; --#{$prefix}form-multi-select-tag-border-width: #{$form-multi-select-tag-border-width}; --#{$prefix}form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color}; --#{$prefix}form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius}; --#{$prefix}form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width}; --#{$prefix}form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height}; --#{$prefix}form-multi-select-tag-delete-icon: #{escape-svg($form-multi-select-tag-delete-icon)}; --#{$prefix}form-multi-select-tag-delete-icon-color: #{$form-multi-select-tag-delete-icon-color}; --#{$prefix}form-multi-select-tag-delete-icon-hover-color: #{$form-multi-select-tag-delete-icon-hover-color}; --#{$prefix}form-multi-select-tag-delete-icon-size: #{$form-multi-select-tag-delete-icon-size}; --#{$prefix}form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap}; --#{$prefix}form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y}; --#{$prefix}form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x}; ```
```ts const vars = { '--my-css-var': 10, '--my-another-css-var': "red" } ``` ```html <div [ngStyle]="vars"></div> ```
```scss $form-multi-select-zindex: 1000; $form-multi-select-font-family: $input-font-family; $form-multi-select-font-size: $input-font-size; $form-multi-select-font-weight: $input-font-weight; $form-multi-select-line-height: $input-line-height; $form-multi-select-color: $input-color; $form-multi-select-bg: $input-bg; $form-multi-select-box-shadow: $box-shadow-inset; $form-multi-select-border-width: $input-border-width; $form-multi-select-border-color: $input-border-color; $form-multi-select-border-radius: $input-border-radius; $form-multi-select-border-radius-sm: $input-border-radius-sm; $form-multi-select-border-radius-lg: $input-border-radius-lg; $form-multi-select-disabled-color: $input-disabled-color; $form-multi-select-disabled-bg: $input-disabled-bg; $form-multi-select-disabled-border-color: $input-disabled-border-color; $form-multi-select-focus-color: $input-focus-color; $form-multi-select-focus-bg: $input-focus-bg; $form-multi-select-focus-border-color: $input-focus-border-color; $form-multi-select-focus-box-shadow: $input-btn-focus-box-shadow; $form-multi-select-invalid-border-color: var(--#{$prefix}form-invalid-border-color); $form-multi-select-valid-border-color: var(--#{$prefix}form-valid-border-color); $form-multi-select-placeholder-color: var(--#{$prefix}secondary-color); $form-multi-select-selection-padding-y: $input-padding-y; $form-multi-select-selection-padding-x: $input-padding-x; $form-multi-select-selection-tags-gap: .25rem; $form-multi-select-selection-tags-padding-y: .25rem; $form-multi-select-selection-tags-padding-x: .25rem; $form-multi-select-tag-bg: var(--#{$prefix}secondary-bg); $form-multi-select-tag-border-width: var(--#{$prefix}border-width); $form-multi-select-tag-border-color: var(--#{$prefix}border-color); $form-multi-select-tag-border-radius: .25rem; $form-multi-select-tag-border-radius-sm: .125rem; $form-multi-select-tag-border-radius-lg: .375rem; $form-multi-select-tag-padding-y: .0625rem; $form-multi-select-tag-padding-x: .5rem; $form-multi-select-tag-delete-width: .75rem; $form-multi-select-tag-delete-height: .75rem; $form-multi-select-tag-delete-icon: url("data:image/svg+xml,"); $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; ```
`'active'`
`number` type allowed since