### File

`packages/ecl/components/ecl-multiselect/ecl-multiselect.component.ts`

### Description

Component representing a custom multiselect input using the ECL design system.

Should be used on a native

### Extends

`ECLBaseDirective`

### Implements

`DoCheck` `OnInit` `OnDestroy`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `)`
selector | `select[eclMultiselect]`
templateUrl | `ecl-multiselect.component.html`

### Index

###### Properties
eclOptionItems injector
###### Methods
getCssClasses
###### Inputs
ariaDescribedby ariaLabeledby disabled eclPlaceholder eclSize hasSearchBox hasSelectAll id isInvalid toggleLabel class e2eAttr tabindex
###### Outputs
eclChange
###### HostBindings
class
###### Accessors
isInvalid disabled cssClasses hasSearchBox hasSelectAll eclPlaceholder

### Constructor

`constructor()`

### Inputs

ariaDescribedby
Type : `string | undefined`
Default value : `undefined`
Defines the `aria-describedby` attribute for accessibility.

ariaLabeledby
Type : `string | undefined`
Default value : `undefined`
Defines the `aria-labelledby` attribute for accessibility.

disabled
Type : `BooleanInput`
Disables the multiselect component when set to true.

eclPlaceholder
Type : `string`
Placeholder text to show in the multiselect input field when no options are selected.

eclSize
Type : `string`
Default value : `'m'`
Multiselect size: 's' | 'm' | 'l'. Default is 'm'.

hasSearchBox
Type : `string`
Enables the search box within the dropdown.

hasSelectAll
Type : `string`
Displays the "Select all" option in the dropdown.

id
Type : `string | undefined`
Default value : `undefined`
Sets the `id` attribute of the multiselect component.

isInvalid
Type : `boolean | undefined`
Marks the multiselect as invalid.

toggleLabel
Type : `string | undefined`
Default value : `undefined`
Label used for the toggle button that expands or collapses the dropdown.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

eclChange
Type : `EventEmitter`
Emits an array of selected option values when the selection changes.

### HostBindings

class
Type : `string`
CSS classes applied to the host element.

### Methods

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

eclOptionItems
Type : `QueryList<EclMultiselectOptionDirective>`
Decorators : `@ContentChildren(undefined)`
List of option directives projected into the component.

injector
Type : `unknown`
Default value : `inject(Injector)`

### Accessors

isInvalid
get `isInvalid()`
Marks the multiselect as invalid. Returns : `boolean | undefined`
set `isInvalid(value: boolean | undefined)`
Parameters :
Name | Type | Optional
value | `boolean | undefined` | No
Returns : `void`

disabled
get `disabled()`
set `disabled(value: BooleanInput)`
Disables the multiselect component when set to true. Parameters :
Name | Type | Optional
value | `BooleanInput` | No
Returns : `void`

cssClasses
get `cssClasses()`
CSS classes applied to the host element. Returns : `string`

hasSearchBox
set `hasSearchBox(value: string)`
Enables the search box within the dropdown. Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

hasSelectAll
set `hasSelectAll(value: string)`
Displays the "Select all" option in the dropdown. Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

eclPlaceholder
get `eclPlaceholder()`
set `eclPlaceholder(value: string)`
Placeholder text to show in the multiselect input field when no options are selected. Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

# results matching ""

# No results matching ""