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.

autofocus: boolean

autofocusList: boolean = false

caseSensitiveIcon: boolean = false

data: T[] = []

disableClear: boolean = false

disabled: boolean

disableFiltering: boolean = false

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

singleSelect: boolean = false

valueKey: keyof T = undefined

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

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

get defaultValue(): any

set defaultValue(value: unknown): void

get displayKey(): any

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

get filteringOptions(): any

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

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

get form(): HTMLFormElement | null

get locale(): any

set locale(value: string): void

get placeholderSearch(): any

set placeholderSearch(value: string | undefined): void

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

get required(): any

set required(value: boolean): void

get selection(): T[]

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

get validationMessage(): string

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

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>

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

get willValidate(): boolean

blur(): void

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

Returns void

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

checkValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:166

Returns boolean

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

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

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:1073

Parameters

• options: FocusOptions

Returns void

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

hide(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:53

Returns Promise<boolean>

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

reportValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:169

Returns boolean

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

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

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: I18nMixin( FormAssociatedRequiredMixin( EventEmitterMixin< IgcComboComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) ), i18n )

setCustomValidity(message: string): void

Defined in src/internals/mixins/forms/types.ts:175

Parameters

• message: string

Returns void

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

show(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:48

Returns Promise<boolean>

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

toggle(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:58

Returns Promise<boolean>