Element

igc-combo

Slots

prefix — Renders content before the input of the combo.

suffix — Renders content after the input of the combo.

header — Renders a container before the list of options of the combo.

footer — Renders a container after the list of options of the combo.

empty — Renders content when the combo dropdown list has no items/data.

helper-text — Renders content below the input of the combo.

toggle-icon — Renders content inside the suffix container of the combo.

clear-icon — Renders content inside the suffix container of the combo.

value-missing — Renders content when the required validation fails.

custom-error — Renders content when setCustomValidity(message) is set.

invalid — Renders content when the component is in invalid state (validity.valid = false).

CSS Parts

label — The encapsulated text label of the combo.

input — The main input field of the combo.

native-input — The native input of the main input field of the combo.

prefix — The prefix wrapper of the combo.

suffix — The suffix wrapper of the combo.

toggle-icon — The toggle icon wrapper of the combo.

clear-icon — The clear icon wrapper of the combo.

case-icon — The case icon wrapper of the combo.

helper-text — The helper text wrapper of the combo.

search-input — The search input field of the combo.

list-wrapper — The list of options wrapper of the combo.

list — The list of options box of the combo.

item — Represents each item in the list of options of the combo.

group-header — Represents each header in the list of options of the combo.

active — Appended to the item parts list when the item is active of the combo.

selected — Appended to the item parts list when the item is selected of the combo.

checkbox — Represents each checkbox of each list item of the combo.

checkbox-indicator — Represents the checkbox indicator of each list item of the combo.

checked — Appended to checkbox parts list when checkbox is checked in the combo.

header — The container holding the header content of the combo.

footer — The container holding the footer content of the combo.

empty — The container holding the empty content of the combo.

IgcComboComponent

new IgcComboComponent(): IgcComboComponent

Defined in src/components/combo/combo.ts:563

Returns IgcComboComponent

autofocus: boolean

autofocusList: boolean = false

caseSensitiveIcon: boolean = false

disableClear: boolean = false

disabled: boolean

emitEvent: object & object

groupHeaderTemplate: ComboItemTemplate<T>

groupKey: string | keyof T

groupSorting: GroupingDirection = 'asc'

invalid: boolean

itemTemplate: ComboItemTemplate<T>

label: string

name: string

open: boolean = false

outlined: boolean = false

placeholder: string

styles: CSSResult[]

tagName: "igc-combo" = 'igc-combo'

get data(): T[]

set data(value: T[]): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

get defaultValue(): unknown

set defaultValue(value: unknown): void

get disableFiltering(): boolean

set disableFiltering(value: boolean): void

get displayKey(): keyof T | undefined

set displayKey(value: keyof T | undefined): void

get filteringOptions(): FilteringOptions<T>

set filteringOptions(value: Partial<FilteringOptions<T>>): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

get form(): HTMLFormElement | null

get locale(): string

set locale(value: string): void

get placeholderSearch(): string

set placeholderSearch(value: string | undefined): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

get required(): boolean

set required(value: boolean): void

get resourceStrings(): IComboResourceStrings

set resourceStrings(value: IComboResourceStrings): void

get selection(): T[]

get singleSelect(): boolean

set singleSelect(value: boolean): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

get validationMessage(): string

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

get validity(): ValidityState

get value(): ComboValue<T>[]

set value(items: ComboValue<T>[]): void

<igc-combo
 .data=${[
   {
     id: 'BG01',
     name: 'Sofia'
   },
   {
     id: 'BG02',
     name: 'Plovdiv'
   }
 ]}
 display-key='name'
 value-key='id'
 value='["BG01", "BG02"]'>
 </igc-combo>

get valueKey(): keyof T | undefined

set valueKey(value: keyof T | undefined): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

get willValidate(): boolean

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

• type: K
• listener: object
• options: boolean | AddEventListenerOptions

Returns void

blur(): void

Defined in src/components/combo/combo.ts:955

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:146

Returns boolean

deselect(items: Item<T> | Item<T>[]): void

Defined in src/components/combo/combo.ts:1010

Parameters

• items: Item<T> | Item<T>[]

  One or more items to be deselected. Multiple items should be passed as an array. When valueKey is specified, the corresponding value should be used in place of the item reference.

Returns void

Example

const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');

// Deselect one item at a time by reference when valueKey is not specified.
combo.deselect(combo.data[0]);

// Deselect multiple items at a time by reference when valueKey is not specified.
combo.deselect([combo.data[0], combo.data[1]]);

// Deselect one item at a time when valueKey is specified.
combo.deselect('BG01');

// Deselect multiple items at a time when valueKey is specified.
combo.deselect(['BG01', 'BG02']);

focus(options: FocusOptions): void

Defined in src/components/combo/combo.ts:949

Parameters

• options: FocusOptions

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

hide(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:90

Returns Promise<boolean>

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

• type: K
• listener: object
• options: boolean | EventListenerOptions

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

reportValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:149

Returns boolean

select(items: Item<T> | Item<T>[]): void

Defined in src/components/combo/combo.ts:982

Parameters

• items: Item<T> | Item<T>[]

  One or more items to be selected. Multiple items should be passed as an array. When valueKey is specified, the corresponding value should be used in place of the item reference.

Returns void

Example

const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');

// Select one item at a time by reference when valueKey is not specified.
combo.select(combo.data[0]);

// Select multiple items at a time by reference when valueKey is not specified.
combo.select([combo.data[0], combo.data[1]]);

// Select one item at a time when valueKey is specified.
combo.select('BG01');

// Select multiple items at a time when valueKey is specified.
combo.select(['BG01', 'BG02']);

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:155

Parameters

• message: string

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

show(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:85

Returns Promise<boolean>

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )

toggle(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:95

Returns Promise<boolean>

register(): void

Defined in src/components/combo/combo.ts:140

Returns void

igcChange: CustomEvent<IgcComboChangeEventArgs<any>>

Defined in src/components/combo/types.ts:50

igcClosed: CustomEvent<void>

Defined in src/components/combo/types.ts:59

igcClosing: CustomEvent<void>

Defined in src/components/combo/types.ts:58

igcOpened: CustomEvent<void>

Defined in src/components/combo/types.ts:57

igcOpening: CustomEvent<void>

Defined in src/components/combo/types.ts:56