Returns the current selection as an array of objects as provided in the data source.
Emitted when the control's selection has changed.
Emitted after the list of options is closed.
Emitter just before the list of options is closed.
Emitted after the list of options is opened.
Emitted just before the list of options is opened.
Removes focus from the component.
Deselects option(s) in the list by either reference or valueKey. If not argument is provided all items will be deselected.
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']);
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.
Sets focus on the component.
Hides the list of options.
Selects option(s) in the list by either reference or valueKey. If not argument is provided all items will be selected.
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']);
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.
Shows the list of options.
Toggles the list of options.
The autofocus attribute of the control.
Focuses the list of options when the menu opens.
Enables the case sensitive search icon in the filtering input.
The data source used to generate the list of options.
Disables the filtering of the list of options.
The key in the data source used to display items in the list.
An object that configures the filtering of the combo.
The template used for the content of each combo group header.
The key in the data source used to group items in the list.
Sorts the items in each group by ascending or descending order.
The template used for the content of each combo item.
The label attribute of the control.
Sets the open state of the component.
The outlined attribute of the control.
The placeholder attribute of the control.
The placeholder attribute of the search input.
Enables single selection mode and moves item filtering to the main input.
Sets the value (selected items). The passed value must be a valid JSON array.
If the data source is an array of complex objects, the valueKey attribute must be set.
Note that when displayKey is not explicitly set, it will fall back to the value of valueKey.
The key in the data source used when selecting items.
The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection. In contrast to the Select component, the Combo component displays all options in a virtualized list of items, meaning the combo box can simultaneously show thousands of options, where one or more options can be selected. Additionally, users can create custom item templates, allowing for robust data visualization. The Combo component features case-sensitive filtering, grouping, complex data binding, dynamic addition of values and more.
Slot
prefix - Renders content before the input of the combo.
Slot
suffix - Renders content after the input of the combo.
Slot
header - Renders a container before the list of options of the combo.
Slot
footer - Renders a container after the list of options of the combo.
Slot
helper-text - Renders content below the input of the combo.
Slot
toggle-icon - Renders content inside the suffix container of the combo.
Slot
clear-icon - Renders content inside the suffix container of the combo.
Slot
value-missing - Renders content when the required validation fails.
Slot
custom-error - Renders content when setCustomValidity(message) is set.
Slot
invalid - Renders content when the component is in invalid state (validity.valid = false).
Csspart
label - The encapsulated text label of the combo.
Csspart
input - The main input field of the combo.
Csspart
native-input - The native input of the main input field of the combo.
Csspart
prefix - The prefix wrapper of the combo.
Csspart
suffix - The suffix wrapper of the combo.
Csspart
toggle-icon - The toggle icon wrapper of the combo.
Csspart
clear-icon - The clear icon wrapper of the combo.
Csspart
case-icon - The case icon wrapper of the combo.
Csspart
helper-text - The helper text wrapper of the combo.
Csspart
search-input - The search input field of the combo.
Csspart
list-wrapper - The list of options wrapper of the combo.
Csspart
list - The list of options box of the combo.
Csspart
item - Represents each item in the list of options of the combo.
Csspart
group-header - Represents each header in the list of options of the combo.
Csspart
active - Appended to the item parts list when the item is active of the combo.
Csspart
selected - Appended to the item parts list when the item is selected of the combo.
Csspart
checkbox - Represents each checkbox of each list item of the combo.
Csspart
checkbox-indicator - Represents the checkbox indicator of each list item of the combo.
Csspart
checked - Appended to checkbox parts list when checkbox is checked in the combo.
Csspart
header - The container holding the header content of the combo.
Csspart
footer - The container holding the footer content of the combo.
Csspart
empty - The container holding the empty content of the combo.