HyMultiCombobox

A multi-combobox — a filterable multi-select that combines a text input with a listbox popup and a row of selected-value chips. Sibling to hy-combobox; a separate element rather than a multiple flag because multi-select carries a different internal model (array value, chip rendering, toggle-on-Enter keyboard semantics, multi-entry form participation) that would otherwise spread conditionals throughout the single-select implementation.

Follows the WAI-ARIA APG combobox pattern: DOM focus stays on the input, option highlight moves via aria-activedescendant. Enter toggles the highlighted option without closing the listbox; Backspace on an empty input removes the last selected chip.

The listbox is positioned with Floating UI: offset + flip + shift keep the popup inside the viewport near the input, and the size middleware caps the listbox height to the available space. autoUpdate repositions on scroll/resize while the listbox is open.

Selected values render as dismissible <hy-chip> elements ahead of the text input. Chips wrap to multiple rows when the input row fills; long labels truncate with ellipsis. An optional maxSelections caps the count — once reached, unselected options appear disabled in the listbox.

Options are passed as a property (.options = [...]). The values property is the currently committed option values (empty array when none). Filtering is controlled internally via filterOption; return false for every option to drive results server-side.

Accessible name. Provide one of: the label property, aria-label on the host, or aria-labelledby referencing another element. The dev-mode WCAG 1.3.1 warning fires only when none is set; aria-label / aria-labelledby on the host are forwarded to the inner <input>.

Examples

<hy-multi-combobox label="Countries" placeholder="Search countries"></hy-multi-combobox>
<script>
  const box = document.querySelector('hy-multi-combobox');
  box.options = [
    { value: 'ch', label: 'Switzerland' },
    { value: 'fr', label: 'France' },
    { value: 'de', label: 'Germany' },
  ];
  box.addEventListener('change', (e) => console.log(e.detail.values));
</script>

Events

• change - Fires when the selection changes. Detail: MultiComboboxChangeDetail.
• input - Fires while the user types. Detail: MultiComboboxInputDetail.
• show - Fires when the listbox opens (does NOT bubble). Detail: HyVisibilityDetail.
• hide - Fires when the listbox closes (does NOT bubble). Detail: HyVisibilityDetail.

Methods

select()

Selects the typeahead input's current text. The chip values are not affected — they are not text content.