Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

tngMultiAutocomplete

The primitive owns three reactive models: open, query, and the selected values array. It also bridges active option state to the owned listbox parts.

Primitive attachment

html
<section
  tngMultiAutocomplete
  #multi="tngMultiAutocomplete"
  [open]="open()"
  (openChange)="open.set($event)"
  [query]="query()"
  (queryChange)="query.set($event)"
  [value]="selectedValues()"
  (valueChange)="selectedValues.set(toValueArray($event))"
>
  @for (value of selectedValues(); track value) {
    <span tngMultiAutocompleteChip [tngValue]="value">{{ resolveLabel(value) }}</span>
  }

  <input tngMultiAutocompleteTrigger type="text" [value]="query()" (input)="onInput($event)" />

  <div tngMultiAutocompleteContent class="contents">
    <div tngMultiAutocompleteOverlay>
      <ul tngMultiAutocompleteListbox [value]="multi.value()">
        @for (option of filteredOptions(); track option.id) {
          <li tngMultiAutocompleteOption [tngValue]="option.id">{{ option.label }}</li>
        }
      </ul>
    </div>
  </div>
</section>
Input / modelTypeDetails
openbooleanControls whether the overlay is attached and visible.
querystringTrigger text used for filtering. This stays separate from the selected values array.
valuereadonly T[]Selected values in insertion order.
disabled, loading, invalidbooleanOptional state hooks reflected on attributes for styling and ARIA.
openChange, queryChange, valueChangeOutputsEmit whenever the matching primitive model changes.
Methodsadd, remove, toggle, removeLast, clearImperative helpers exposed on the primitive export.

Owned parts

MultiAutocomplete stays split into small directives so you can own the shell and the portaled overlay.

Part selectors

txt
[tngMultiAutocomplete]
[tngMultiAutocompleteTrigger]
[tngMultiAutocompleteChip]
[tngMultiAutocompleteContent]
[tngMultiAutocompleteOverlay]
[tngMultiAutocompleteListbox]
[tngMultiAutocompleteOption]
PartResponsibility
tngMultiAutocompleteTriggerOpens the overlay, keeps the query in sync, and handles chip-removal backspace behavior.
tngMultiAutocompleteChipRepresents a selected value and stays keyboard-focusable for removal flows.
tngMultiAutocompleteContent + tngMultiAutocompleteOverlayOwn the overlay container and portaled surface.
tngMultiAutocompleteListbox + tngMultiAutocompleteOptionOwn option navigation, active item state, and commit behavior.

Models and events

The headless primitive is the right layer when you need to control the live query directly or coordinate chips, input text, and overlay state with other primitives.

  • query remains controlled even when the selected values array changes.
  • Selecting an active option toggles its presence in value.
  • Backspace on an empty trigger removes the last selected chip.

Reflected attributes

The primitive reflects state onto slot-based attributes for styling. Keep the focus ring on the host, not the option rows.

ElementAttributes
[tngMultiAutocomplete]data-slot, data-state, data-disabled, data-loading, data-invalid
[tngMultiAutocompleteChip]data-slot="multi-autocomplete-chip"
[tngMultiAutocompleteOption]data-slot="multi-autocomplete-option", plus active/selected state from the listbox bridge