The autofocus attribute of the control.
autofocus
Focuses the list of options when the menu opens.
autofocus-list
Enables the case sensitive search icon in the filtering input.
case-sensitive-icon
The data source used to generate the list of options.
Disables the filtering of the list of options.
disable-filtering
The disabled state of the component
[disabled=false]
Optional displayThe key in the data source used to display items in the list.
display-key
The template used for the content of each combo group header.
Optional groupThe key in the data source used to group items in the list.
group-key
Sorts the items in each group by ascending or descending order.
group-sorting
Control the validity of the control.
The template used for the content of each combo item.
The label attribute of the control.
label
The name attribute of the control.
Sets the open state of the component.
open
The outlined attribute of the control.
outlined
The placeholder attribute of the control.
placeholder
The placeholder attribute of the search input.
placeholder-search
Makes the control a required field in a form context.
Enables single selection mode and moves item filtering to the main input.
single-select
Optional valueThe key in the data source used when selecting items.
value-key
Static stylesStatic Readonly tagAn object that configures the filtering of the combo.
filtering-options
Returns the HTMLFormElement associated with this element.
Returns the current selection as an array of objects as provided in the data source.
A string containing the validation message of this element.
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.
Returns the current selection as a list of comma separated values, represented by the value key, when provided.
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.
value
<igc-combo
.data=${[
{
id: 'BG01',
name: 'Sofia'
},
{
id: 'BG02',
name: 'Plovdiv'
}
]}
display-key='name'
value-key='id'
value='["BG01", "BG02"]'>
</igc-combo>
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.
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.
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.
Static register
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.
Element
igc-combo
Slot
prefix - Renders content before the input.
Slot
suffix - Renders content after input.
Slot
header - Renders a container before the list of options.
Slot
footer - Renders a container after the list of options.
Slot
helper-text - Renders content below the input.
Slot
toggle-icon - Renders content inside the suffix container.
Slot
clear-icon - Renders content inside the suffix container.
Fires
igcFocus - Emitted when the select gains focus.
Fires
igcBlur - Emitted when the select loses focus.
Fires
igcChange - Emitted when the control's selection has changed.
Fires
igcOpening - Emitted just before the list of options is opened.
Fires
igcOpened - Emitted after the list of options is opened.
Fires
igcClosing - Emitter just before the list of options is closed.
Fires
igcClosed - Emitted after the list of options is closed.
Csspart
label - The encapsulated text label.
Csspart
input - The main input field.
Csspart
native-input - The native input of the main input field.
Csspart
prefix - The prefix wrapper.
Csspart
suffix - The suffix wrapper.
Csspart
toggle-icon - The toggle icon wrapper.
Csspart
clear-icon - The clear icon wrapper.
Csspart
case-icon - The case icon wrapper.
Csspart
helper-text - The helper text wrapper.
Csspart
search-input - The search input field.
Csspart
list-wrapper - The list of options wrapper.
Csspart
list - The list of options box.
Csspart
item - Represents each item in the list of options.
Csspart
group-header - Represents each header in the list of options.
Csspart
active - Appended to the item parts list when the item is active.
Csspart
selected - Appended to the item parts list when the item is selected.
Csspart
checkbox - Represents each checkbox of each list item.
Csspart
checkbox-indicator - Represents the checkbox indicator of each list item.
Csspart
checked - Appended to checkbox parts list when checkbox is checked.
Csspart
header - The container holding the header content.
Csspart
footer - The container holding the footer content.
Csspart
empty - The container holding the empty content.