CngxSelectSearch

ComponentOnPushv0.1.0WCAG AA

projects/forms/select/declarative/select-search.component.ts

Import#

import { CngxSelectSearch } from '@cngx/forms/select'

Description#

Declarative-mode search element. Projects an <input type="search"> into the parent shell's panel above the listbox.

Two-way binds the shell's searchTerm via CNGX_SELECT_SHELL_SEARCH_HOST and forwards ArrowUp/Down/Home/End/Enter/Escape into the listbox AD so the user can filter and pick without leaving the input.

Usage: direct child of <cngx-select-shell>. The shell projects via <ng-content select="cngx-select-search" />.

<cngx-select-shell [(value)]="city">
  <cngx-select-search [placeholder]="'Filter cities…'" />
  @for (city of cities; track city) {
    <cngx-option [value]="city">{{ city }}</cngx-option>
  }
</cngx-select-shell>

https://cngxjs.github.io/cngx/examples/#/forms/select/declarative/search

Metadata#

Selector: cngx-select-search
Export as: cngxSelectSearch
Change detection: ChangeDetectionStrategy.OnPush
Style URLs: ./select-search.component.css

Index#

Inputs

ariaLabel placeholder

Inputs#

ariaLabel#string | null

input()

ARIA label override. Cascade: per-instance [aria-label] → CNGX_SELECT_CONFIG.ariaLabels.searchInput → null (input falls back to placeholder for AT naming).

default null, { alias: 'aria-label' }

placeholder#string

input()

Placeholder text on the input.

default 'Search…'

Default visuals for the declarative <cngx-select-search> - a search input rendered above a projected listbox. The host carries its own padding + bottom divider; the inner .cngx-select-search__input is a bordered text field with primary-tinted focus ring.

State modifiers

:focus-visible on .cngx-select-search__input - 2px primary outline + 1px offset

Slots

:host - block-level wrapper with bottom divider separating the search field from the option list
.cngx-select-search__input - the bordered text input

Inheritance

Surface and focus tokens fall back to the foundation so brand swaps propagate without per-component theming:

--cngx-select-search-padding - hardcoded 0.5rem
--cngx-select-search-divider -> --cngx-color-border
--cngx-select-search-input-padding - hardcoded 0.375rem 0.5rem
--cngx-select-search-input-border -> --cngx-color-border
--cngx-select-search-input-radius - hardcoded 0.25rem
--cngx-select-search-input-bg - hardcoded transparent
--cngx-select-search-focus-outline -> --cngx-color-primary
--cngx-select-search-focus-offset - hardcoded 1px