CngxActionSelect

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/forms/select/action-select/action-select.component.ts

Import#

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

Description#

Single-value autocomplete with inline quick-create. Mirrors CngxTypeahead's input surface; adds the *cngxSelectAction slot - when the consumer fires its commit() callback the bound CngxSelectCreateAction materialises a new T through the commit controller. On success: patches the local buffer, writes value, announces 'created', optionally closes.

Pessimistic commit only: panel stays open while pending, isPending flips on the slot context, error surfaces in the commit-error banner. True optimistic create requires a consumer-supplied tempValueFactory.

Dismiss-guard: Escape and click-outside are intercepted while actionDirty() is true (consumer flips it via setDirty(true)); Escape fires cancel() to reset.

https://cngxjs.github.io/cngx/examples/#/forms/select/action-select/basic-sync-quick-create https://cngxjs.github.io/cngx/examples/#/forms/select/action-select/custom-action-template-split-actions

Metadata#

Selector: cngx-action-select
Export as: cngxActionSelect
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Template URL: ./action-select.component.html
Style URLs: ../shared/select-base.css, ./action-select.component.css
Implements: CngxFormFieldControl
Imports: CngxClickOutside CngxListbox CngxListboxSearch CngxListboxTrigger CngxPopover CngxPopoverTrigger CngxSelectPanel NgTemplateOutlet

Host#

Class: cngx-action-select
Static attributes: [id]resolvedId()
[attr.aria-readonly]ariaReadonly()

Providers#

CNGX_FORM_FIELD_CONTROL: useExisting CngxActionSelect
CNGX_STATEFUL: useFactory (): { readonly state: CngxAsyncState } => { const self = inject(CngxActionSelect); return { state: self.commitState }; }
CNGX_SELECT_PANEL_HOST: useExisting CngxActionSelect
CNGX_SELECT_PANEL_VIEW_HOST: useExisting CngxActionSelect

Relationships

Depends on12

CngxClickOutsideAttribute directive

CngxListboxAttribute directive

CngxListboxSearchDirective

CngxListboxTriggerAttribute directive

CngxPopoverAttribute directive

CngxPopoverTriggerAttribute directive

CngxSelectPaneldependency

NgTemplateOutletdependency

CNGX_FORM_FIELD_CONTROLservice

CNGX_STATEFULservice

CNGX_SELECT_PANEL_HOSTservice

CNGX_SELECT_PANEL_VIEW_HOSTservice

Index#

Inputs#

actionPosition#"top" | "bottom" | "both" | "none"

input()

Position of the *cngxSelectAction slot in the panel. Default 'bottom'.

default this.actionConfig.actionPosition,

announceChanges#boolean | null

input()

default null

announceTemplate#CngxSelectAnnouncerConfig['format'] | null

input()

default null

ariaLabel#string | null

input()

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

ariaLabelledBy#string | null

input()

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

autofocus#boolean

input()

default false

caretGlyph#TemplateRef | null

default null

clearable#boolean

input()

default false

clearButtonAriaLabel#string

input()

default this.config.ariaLabels?.clearButton ?? 'Reset selection',

clearGlyph#TemplateRef | null

default null

clearOnBlur#boolean

input()

default true

closeOnCreate#boolean

input()

Whether a successful create closes the panel. Default true. Set false for confirmation / multi-step wizard flows.

default this.actionConfig.closeOnCreate ?? true

commitAction#CngxSelectCommitAction | null

default null

commitErrorAnnouncePolicy#CngxCommitErrorAnnouncePolicy

input()

Scalar-commit error-announce policy. Default { kind: 'soft' } for action-select (matches typeahead's free-text flow). Override to 'verbose' per-instance when destructive create warrants a louder read.

default this.config.commitErrorAnnouncePolicy ?? { kind: 'soft' },

commitErrorDisplay#CngxSelectCommitErrorDisplay

input()

default this.config.commitErrorDisplay

commitMode#CngxSelectCommitMode

input()

default 'optimistic'

compareWith#CngxSelectCompareFn

default cngxSelectDefaultCompare as CngxSelectCompareFn<T>,

disabledInput#boolean

input()

default false, { alias: 'disabled' }

displayWith#(value: T) => string

default String

enterKeyHint#NonNullable

Mobile enterkeyhint. Default 'go' - Enter routes to quick-create when no AD item is active.

default this.config.enterKeyHint ?? 'go',

hideCaret#boolean

input()

default !this.config.showCaret

hideSelectionIndicator#boolean

input()

default !this.config.showSelectionIndicator

idInput#string | null

input()

default null, { alias: 'id' }

inputMode#NonNullable

Mobile inputmode. Defaults from CngxSelectConfig.inputMode.

default this.config.inputMode

label#string

input()

default ''

liveInputFallback#boolean

input()

Fall back to the raw <input> value when the debounced searchTerm hasn't caught up. Disable when the consumer owns its own search pipeline.

default this.actionConfig.liveInputFallback

loading#boolean

input()

default false

loadingVariant#CngxSelectLoadingVariant

input()

default this.config.loadingVariant

options#CngxSelectOptionsInput

default [] as CngxSelectOptionsInput<T>

panelClass#string | readonly string[] | null

input()

default null

panelWidth#'trigger' | number | null

input()

default this.config.panelWidth

placeholder#string

input()

default ''

popoverPlacement#PopoverPlacement

input()

Popover placement relative to the trigger. Per-instance input wins over CngxActionSelectConfig.popoverPlacement.

default this.actionConfig.popoverPlacement

quickCreateAction#CngxSelectCreateAction | null

Quick-create handler fired by the slot's commit() callback. Receives the live searchTerm and { label }, resolves to a new T. null disables the create path - slot still renders, but commit() becomes a silent no-op.

default null

refreshingVariant#CngxSelectRefreshingVariant

input()

default this.config.refreshingVariant

requiredInput#boolean

input()

default false, { alias: 'required' }

searchDebounceMs#number

input()

Debounce for the inline search (ms). Default 0 so the slot's let-term reflects every keystroke; raise for large option lists.

default this.config.typeaheadDebounceInterval

searchMatchFn#ListboxMatchFn | null

input()

default null

selectionIndicatorPosition#'before' | 'after' | null

input()

default null

selectionIndicatorVariant#CngxSelectSelectionIndicatorVariant | null

input()

default null

skeletonRowCount#number

input()

default this.config.skeletonRowCount

skipInitial#boolean

input()

default false

state#CngxAsyncState> | null

default null

tabIndex#number

input()

default 0

value#T | undefined

model()

Two-way single-value binding.

Outputs#

cleared#void

output()

closed#void

output()

commitError#unknown

output()

created#CngxSelectOptionDef

Dedicated channel for successful creates. Fires after selectionChange so consumers can bind (created) without branching on action === 'create'.

opened#void

output()

openedChange#boolean

output()

retry#void

output()

searchTermChange#string

output()

selectionChange#CngxActionSelectChange

stateChange#AsyncStatus

output()

value#T | undefined

model()

Two-way single-value binding.

Instance Properties#

commitState#unknown

Readonly

this.core.commitState

disabled#unknown

Readonly

this.core.disabled

isCommitting#unknown

Readonly

this.core.isCommitting

retryFn#unknown

Readonly

input<(() => void) | null>(null)

selected#unknown

Readonly

computed<CngxSelectOptionDef<T> | null>(
  () => {
    const v = this.value();
    if (v === undefined || v === null) {
      return null;
    }
    const map = this.core.valueToOptionMap();
    if (map) {
      return map.get(v as unknown) ?? null;
    }
    const eq = this.compareWith();
    return this.flatOptions().find((o) => eq(o.value, v)) ?? null;
  },
  {
    equal: (a, b) => {
      if (a === b) {
        return true;
      }
      if (a === null || b === null) {
        return false;
      }
      return (this.compareWith() as CngxSelectCompareFn<unknown>)(a.value, b.value);
    },
  },
)

Methods#

clearLocalItems#void

Reset the local buffer. Idempotent.

close#void

focus#void

focus(options?: FocusOptions)

@paramoptions?FocusOptions

handleBlur#void

Protected

handleBlur(event?: FocusEvent)

@paramevent?FocusEvent

handleClearClick#void

Protected

handleClearClick(event: Event)

@parameventEvent

handleFocus#void

Protected

handleRetry#void

Protected

handleWrapperClick#void

Protected

isEmpty#boolean

Protected

open#void

patchData#void

patchData(item: CngxSelectOptionDef<T>)

Append a pre-built option to the local buffer. Used internally by the create-commit handler; exposed for consumer pre-seed (recent- items, history workflows).

@paramitemCngxSelectOptionDef

toggle#void

HostBindings#

Binding	Expression
`[id]`	`resolvedId()`
`[attr.aria-readonly]`	`ariaReadonly()`

Structural styles shared across the entire CngxSelect family - imported via styleUrls from every variant (CngxSelect, CngxMultiSelect, CngxCombobox, CngxTypeahead, CngxTreeSelect, CngxReorderableMultiSelect, CngxActionSelect, CngxActionMultiSelect, CngxSelectShell, and the panel components).

All variants run encapsulation: None so the rules below are global; the .cngx-select__* BEM-style class prefix is the namespace.

State modifiers

.cngx-option--highlighted on an option row - primary-tinted background marking the keyboard-focused row
[aria-disabled='true'] on an option - opacity 0.5 + cursor: not-allowed
.cngx-select__option--pending - cursor: progress while a row's commit is in flight
.cngx-select__chip-list--reordering - whole-strip cursor: grabbing while a drag is active
.cngx-select__chip--dragging on a chip - Trello-style lift (shadow + scale + tilt + accent fill)
.cngx-select__chip--drag-over on a chip - vertical drop bar painted on the leading edge via ::before

Variants

Chip-list overflow modes via data-overflow:

default - flex-wrap chips across multiple rows
data-overflow='scroll-x' - single row + horizontal scroll
data-overflow='truncate' - single row + clipped overflow + the .cngx-select__chip-overflow-badge count pill

Error surfaces with two layouts:

.cngx-select__error - column-stacked block (message + retry)
.cngx-select__error--inline - inline banner above the option list
.cngx-select__commit-error - per-commit failure banner

Slots

.cngx-select__panel - the floating panel surface (anchor-positioned via position-try-fallbacks)
.cngx-select__group-header - uppercase optgroup label
.cngx-select__option / .cngx-select__check - option row + the selected-state checkmark
.cngx-select__loading / .cngx-select__empty - inline message rows
.cngx-select__skeleton / .cngx-select__skeleton-row - first-load shimmer placeholders (static under prefers-reduced-motion)
.cngx-select__spinner-wrap / .cngx-select__spinner - first-load spinner ring
.cngx-select__loading-bar - first-load top-edge progress bar
.cngx-select__refreshing / .cngx-select__refreshing-spinner / .cngx-select__refreshing-dots - subsequent-load indicators
.cngx-select__option-spinner / .cngx-select__option-error - per-row commit feedback
.cngx-select__chip-list / .cngx-select__chip-overflow-badge - chip strip + overflow count
.cngx-select__chip-wrap / .cngx-select__chip-handle - reorderable chip surface + optional drag-handle glyph
.cngx-select__error / .cngx-select__error--inline / .cngx-select__error-message / .cngx-select__error-retry / .cngx-select__commit-error - error block, banner, and retry pieces

Inheritance

Tokens are registered top-level in @layer cngx.tokens via @property so any consumer (cngx.theme layer, app layer) can override without learning the type.

Panel surface, every primary-tinted glyph, and every danger-toned error surface delegate to the foundation so a dark-mode swap cascades through the floating panel even when anchor positioning detaches it from the trigger's DOM context:

--cngx-select-panel-border -> --cngx-color-border
--cngx-select-panel-bg -> --cngx-color-surface
--cngx-select-panel-color -> --cngx-color-text
--cngx-select-panel-shadow -> --cngx-shadow-md
--cngx-select-check-color -> --cngx-color-primary
--cngx-select-spinner-color -> --cngx-color-primary
--cngx-select-loading-bar-color -> --cngx-color-primary
--cngx-select-refreshing-color -> --cngx-color-primary
--cngx-select-option-spinner-color -> --cngx-color-primary
--cngx-select-option-error-color -> --cngx-color-danger
--cngx-select-error-color -> --cngx-color-danger
--cngx-select-chip-remove-hover-color -> --cngx-color-danger
--cngx-select-chip-drag-bg -> --cngx-color-primary
--cngx-select-chip-drop-bar-color -> --cngx-color-primary
--cngx-select-trigger-invalid-border-color -> --cngx-color-danger
--cngx-select-trigger-invalid-outline-color -> --cngx-color-danger

--cngx-select-panel-min-width is intentionally NOT registered via @property so the anchor-size(width) fallback survives when the consumer doesn't override it; registering it with any initial-value would shadow the var() fallback and break anchor positioning.

Dark mode

Three hooks swap alpha-on-black surfaces (panel shadow, option highlight, spinner track, chip-overflow tint, chip remove-hover tint, chip handle muted, chip drag shadow) plus the skeleton shimmer gradient and the option-spinner track:

prefers-color-scheme: dark
[data-color-scheme="dark"]
.dark class

Foundation-delegated tokens ride the foundation cascade unchanged.

Pair with

@cngx/themes/material/select-theme - Material 3 surface treatment across the entire family

Trigger skin for CngxActionSelect - a "type-to-create" scalar select that pairs an inline <input> with an action handler (typically a quick-create button). The host carries .cngx-action-select; the trigger row matches CngxTypeahead 1:1 so a consumer with a typeahead theme gets this variant for free. Panel frame, option rows, loading variants, and error surfaces ride on shared/select-base.css.

State modifiers

:focus-within on .cngx-action-select__trigger - 2px primary outline + 2px offset
.cngx-action-select__input:disabled - cursor: not-allowed + opacity dim
:focus-visible on .cngx-action-select__clear - 2px primary outline + rounded corner

Slots

.cngx-action-select__root - relative-positioned flex wrapper
.cngx-action-select__trigger - the bordered row
.cngx-action-select__input - inline text input
.cngx-action-select__clear - reset button
.cngx-action-select__caret - panel-state glyph

Inheritance

Trigger surface tokens delegate to the foundation so brand swaps on border / surface propagate without per-component theming:

--cngx-action-select-border -> --cngx-color-border
--cngx-action-select-bg -> --cngx-color-surface

Pair with

@cngx/themes/material/select-theme - Material 3 surface treatment shared across the entire select family

Index#

Surface

--cngx-select-panel-border --cngx-select-panel-bg --cngx-select-panel-color --cngx-select-panel-shadow --cngx-select-placeholder-color --cngx-select-caret-color --cngx-select-clear-color --cngx-action-select-border --cngx-action-select-bg

Layout

--cngx-select-panel-radius --cngx-select-panel-padding --cngx-select-panel-max-height --cngx-select-option-padding --cngx-select-option-min-height --cngx-select-option-radius --cngx-select-caret-size --cngx-select-chip-gap --cngx-select-chip-wrap-radius --cngx-select-chip-wrap-gap --cngx-action-select-gap --cngx-action-select-min-height --cngx-action-select-padding --cngx-action-select-radius

State / Highlighted

--cngx-select-option-highlight-bg

State / Selected

--cngx-select-check-color

State / Disabled

--cngx-select-disabled-opacity

State / Loading

--cngx-select-skeleton-gap --cngx-select-skeleton-padding --cngx-select-skeleton-row-height --cngx-select-skeleton-row-radius --cngx-select-spinner-padding --cngx-select-spinner-size --cngx-select-spinner-border --cngx-select-spinner-color --cngx-select-loading-bar-height --cngx-select-loading-bar-color

State / Refreshing

--cngx-select-refreshing-height --cngx-select-refreshing-color --cngx-select-refreshing-spinner-padding --cngx-select-refreshing-dots-gap --cngx-select-refreshing-dots-padding --cngx-select-refreshing-dot-size --cngx-select-refreshing-dot-color

State / Commit

--cngx-select-option-spinner-size --cngx-select-option-spinner-color --cngx-select-option-error-color --cngx-select-commit-error-padding --cngx-select-commit-error-radius

State / Overflow

--cngx-select-chip-overflow-badge-bg --cngx-select-chip-overflow-badge-color

State / Remove

--cngx-select-chip-remove-size --cngx-select-chip-remove-hover-bg --cngx-select-chip-remove-hover-color

State / Reorder

--cngx-select-chip-handle-color --cngx-select-chip-handle-size

State / Dragging

--cngx-select-chip-drag-shadow --cngx-select-chip-drag-bg --cngx-select-chip-drag-color --cngx-select-chip-drag-scale --cngx-select-chip-drag-tilt --cngx-select-chip-drop-bar-width --cngx-select-chip-drop-bar-color

State / Error

--cngx-select-error-gap --cngx-select-error-padding --cngx-select-error-color --cngx-select-error-inline-padding --cngx-select-error-inline-radius --cngx-select-error-retry-border

State / Trigger invalid

--cngx-select-trigger-invalid-border-color --cngx-select-trigger-invalid-border-width --cngx-select-trigger-invalid-outline-color --cngx-select-trigger-invalid-glow

Surface

--cngx-select-panel-border#*

Default value 1px solid oklch(0.85 0.01 250)

Border shorthand of the dropdown panel. Falls back through --cngx-color-border. inherits: true so the :root delegating value reaches the floating panel host (anchor-positioned, may sit outside the normal DOM flow).

See: [[--cngx-color-border]]

--cngx-select-panel-bg#<color>

Default value oklch(1 0 0)

Background of the dropdown panel. Falls back through --cngx-color-surface.

See: [[--cngx-color-surface]]

--cngx-select-panel-color#*

Default value currentColor

Text color inside the panel. syntax: '*' + initial-value currentColor lets the panel inherit text color from its ancestor by default. Registering as <color> would forbid currentColor since <color> requires a computationally- independent value.

--cngx-select-panel-shadow#*

Default value 0 4px 12px oklch(0 0 0 / 0.12)

Drop-shadow shorthand. Falls back through --cngx-shadow-md. inherits: true so the :root dark-mode override (deeper shadow on dark) reaches the floating panel host.

--cngx-select-placeholder-color#<color>

Default value oklch(0 0 0 / 0.5)

Color of the placeholder text shown when no value is selected.

--cngx-select-caret-color#<color>

Default value oklch(0 0 0 / 0.5)

Color of the dropdown caret glyph shared across every variant. Muted by default to mirror the placeholder token; the Material bridge maps it to --mat-sys-on-surface-variant. inherits: true so a trigger-level override reaches the glyph element.

--cngx-select-clear-color#<color>

Default value oklch(0 0 0 / 0.5)

Color of the clear-button glyph shared across every variant. Tracks the same muted default as the caret so both trigger affordances read uniformly. inherits: true so a trigger-level override reaches the glyph element.

--cngx-action-select-border#*

Default value 1px solid oklch(0.85 0.01 250)

Border shorthand of the trigger.

--cngx-action-select-bg#<color>

Default value oklch(1 0 0)

Background of the trigger. Falls back through --cngx-color-surface.

See: [[--cngx-color-surface]]

Layout

--cngx-select-panel-radius#*

Default value 0.25rem

Corner radius of the dropdown panel.

--cngx-select-panel-padding#*

Default value 0.25rem

Inner padding of the panel.

--cngx-select-panel-max-height#*

Default value 16rem

Maximum height before vertical scrolling kicks in.

--cngx-select-option-padding#*

Default value 0.375rem 0.5rem

Padding shorthand of each option row.

--cngx-select-option-min-height#*

Default value auto

Minimum height of an option row - defaults to auto so dense rows stay compact.

--cngx-select-option-radius#*

Default value 0.125rem

Corner radius of an option row.

--cngx-select-caret-size#*

Default value 1.25em

Font-size of the dropdown caret glyph shared across every variant.

--cngx-select-chip-gap#*

Default value 0.25rem

Gap between chips inside the trigger chip list.

--cngx-select-chip-wrap-radius#*

Default value 0.25rem

Corner radius of the reorderable chip wrap container.

--cngx-select-chip-wrap-gap#*

Default value 0.25rem

Gap between the chip body and any projected drag handle.

--cngx-action-select-gap#*

Default value 0.5rem

Gap between the input, clear button, and caret.

--cngx-action-select-min-height#*

Default value 2.25rem

Minimum block size of the trigger.

--cngx-action-select-padding#*

Default value 0 0.75rem

Padding shorthand of the trigger.

--cngx-action-select-radius#*

Default value 0.25rem

Corner radius of the trigger.

State / Highlighted

--cngx-select-option-highlight-bg#<color>

Default value oklch(0.66 0.19 50 / 0.1)

Background of the keyboard-highlighted option row. Defaults to a low-alpha tint of --cngx-color-primary so the highlight reads as brand-accented without competing with selection state.

See: [[--cngx-color-primary]]

State / Selected

--cngx-select-check-color#<color>

Default value oklch(0.66 0.19 50)

Color of the selected-option checkmark glyph. Falls back through --cngx-color-primary.

See: [[--cngx-color-primary]]

State / Disabled

--cngx-select-disabled-opacity#<number>

Default value 0.5

Opacity multiplier applied when the trigger is disabled. Shared family-wide so every variant dims its disabled trigger identically.

State / Loading

--cngx-select-skeleton-gap#*

Default value 0.25rem

Vertical gap between skeleton placeholder rows.

--cngx-select-skeleton-padding#*

Default value 0.25rem

Padding around the skeleton placeholder block.

--cngx-select-skeleton-row-height#*

Default value 1.75rem

Height of each skeleton placeholder row.

--cngx-select-skeleton-row-radius#*

Default value 0.125rem

Corner radius of each skeleton placeholder row.

--cngx-select-spinner-padding#*

Default value 1rem

Padding around the first-load spinner wrapper.

--cngx-select-spinner-size#*

Default value 1.5rem

Diameter of the first-load spinner ring.

--cngx-select-spinner-border#*

Default value 2px solid oklch(0 0 0 / 0.15)

Track stroke of the first-load spinner ring. inherits: true so the :root dark-mode override (alpha-on-white on dark) reaches the spinner inside the floating panel.

--cngx-select-spinner-color#<color>

Default value oklch(0.66 0.19 50)

Indicator stroke of the first-load spinner ring. Falls back to --cngx-color-primary.

--cngx-select-loading-bar-height#<length>

Default value 3px

Height of the first-load loading bar.

--cngx-select-loading-bar-color#<color>

Default value oklch(0.66 0.19 50)

Color of the first-load loading bar. Falls back to --cngx-color-primary.

State / Refreshing

--cngx-select-refreshing-height#<length>

Default value 2px

Height of the subsequent-load refreshing bar.

--cngx-select-refreshing-color#<color>

Default value oklch(0.66 0.19 50)

Color of the refreshing bar gradient. Falls back to --cngx-color-primary.

--cngx-select-refreshing-spinner-padding#*

Default value 0.25rem

Padding around the refreshing spinner wrapper.

--cngx-select-refreshing-dots-gap#*

Default value 0.25rem

Gap between the three refreshing dots.

--cngx-select-refreshing-dots-padding#*

Default value 0.375rem

Padding around the refreshing dots block.

--cngx-select-refreshing-dot-size#*

Default value 0.375rem

Diameter of each refreshing dot.

--cngx-select-refreshing-dot-color#*

Default value currentColor

Color of each refreshing dot.

State / Commit

--cngx-select-option-spinner-size#*

Default value 0.875rem

Diameter of the per-row commit spinner.

--cngx-select-option-spinner-color#<color>

Default value oklch(0.66 0.19 50)

Indicator stroke of the per-row commit spinner.

--cngx-select-option-error-color#<color>

Default value oklch(0.6 0.18 25)

Glyph color of the per-row commit error indicator. Falls back to --cngx-color-danger.

--cngx-select-commit-error-padding#*

Default value 0.375rem 0.5rem

Padding of the commit error banner.

--cngx-select-commit-error-radius#*

Default value 0.125rem

Corner radius of the commit error banner.

State / Overflow

--cngx-select-chip-overflow-badge-bg#<color>

Default value oklch(0 0 0 / 0.08)

Background of the chip overflow badge shown in truncate overflow mode.

--cngx-select-chip-overflow-badge-color#<color>

Default value oklch(0 0 0 / 0.6)

Text color of the chip overflow badge.

State / Remove

--cngx-select-chip-remove-size#*

Default value 1.25rem

Hit-target diameter of the chip remove button inside a reorderable chip wrap.

--cngx-select-chip-remove-hover-bg#<color>

Default value oklch(0 0 0 / 0.12)

Background tint of the chip remove button on hover.

--cngx-select-chip-remove-hover-color#<color>

Default value oklch(0.6 0.18 25)

Foreground color of the chip remove button on hover. Falls back to --cngx-color-danger.

State / Reorder

--cngx-select-chip-handle-color#<color>

Default value oklch(0.5 0.01 250)

Color of the optional projected drag-handle glyph.

--cngx-select-chip-handle-size#*

Default value 0.75rem

Font-size of the optional projected drag-handle glyph.

State / Dragging

--cngx-select-chip-drag-shadow#*

Default value 0 8px 20px oklch(0 0 0 / 0.28)

Drop-shadow of the chip lifted into the dragging state. inherits: true so the :root dark-mode override (deeper shadow on dark) reaches the chip while it's being dragged.

--cngx-select-chip-drag-bg#<color>

Default value oklch(0.66 0.19 50)

Background of the chip lifted into the dragging state. Falls back to --cngx-color-primary.

See: [[--cngx-color-primary]]

--cngx-select-chip-drag-color#<color>

Default value oklch(1 0 0)

Text color of the chip lifted into the dragging state.

--cngx-select-chip-drag-scale#<number>

Default value 1.06

Scale multiplier of the dragging chip - Trello-style lift.

--cngx-select-chip-drag-tilt#<angle>

Default value -1.5deg

Rotation tilt applied to the dragging chip - Trello-style lift.

--cngx-select-chip-drop-bar-width#<length>

Default value 3px

Width of the drop-indicator bar between chips.

--cngx-select-chip-drop-bar-color#<color>

Default value oklch(0.66 0.19 50)

Color of the drop-indicator bar between chips. Falls back to --cngx-color-primary.

State / Error

--cngx-select-error-gap#*

Default value 0.5rem

Gap between the error message and the retry button.

--cngx-select-error-padding#*

Default value 0.5rem 0.75rem

Padding of the panel-wide error block.

--cngx-select-error-color#<color>

Default value oklch(0.6 0.18 25)

Text color of every error surface. Falls back to --cngx-color-danger.

See: [[--cngx-color-danger]]

--cngx-select-error-inline-padding#*

Default value 0.375rem 0.5rem

Padding of the inline error banner shown above the option list.

--cngx-select-error-inline-radius#*

Default value 0.125rem

Corner radius of the inline error banner.

--cngx-select-error-retry-border#*

Default value 1px solid currentColor

Border shorthand of the error retry button.

State / Trigger invalid

--cngx-select-trigger-invalid-border-color#<color>

Default value oklch(0.6 0.18 25)

Border color painted on the trigger wrapper when aria-invalid="true". Defaults track --cngx-color-danger via the delegating :root entry below.

--cngx-select-trigger-invalid-border-width#<length>

Default value 1px

Border width painted on the trigger wrapper when aria-invalid="true".

--cngx-select-trigger-invalid-outline-color#<color>

Default value oklch(0.6 0.18 25)

Outline color layered on the invalid trigger when focus is inside it. Defaults track --cngx-color-danger via the delegating :root entry below.

--cngx-select-trigger-invalid-glow#*

Default value 0 0 0 3px oklch(0.6 0.18 25 / 0.2)

Soft halo layered behind the invalid trigger at focus time. Authored as a box-shadow so it composes with any consumer-supplied focus outline.

Material theme

import { ChangeDetectionStrategy, Component, ViewEncapsulation, signal } from '@angular/core';

import { CngxActionSelect, type CngxSelectOptionDef } from '@cngx/forms/select';

/**
 * `CngxActionSelect` rendered against a Material 3 palette via the published
 * `@cngx/themes/material/select-theme` bridge.
 *
 * The stylesheet builds a real M3 theme: `mat.theme` emits the `--mat-sys-*`
 * system tokens, then `select.theme($theme)` routes every `--cngx-select-*`
 * token onto its Material counterpart, so the trigger, panel surface, and
 * selected-option tones inherit the palette with no per-instance overrides.
 * `ViewEncapsulation.None` lets the global `html` theme and the
 * `:where(cngx-action-select)` bridge rules reach both the trigger and the
 * top-layer panel.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [CngxActionSelect],
  styleUrl: './material-theme.component.scss',
  template: `
    <div class="demo">
      <cngx-action-select
        [label]="'Favorite color'"
        [options]="colors"
        [(value)]="value"
        [clearable]="true"
        [selectionIndicatorPosition]="'after'"
        placeholder="Pick a color…"
      />
      <p class="demo__readout">Selected: {{ value() ?? '—' }}</p>
    </div>
  `,
})
export class MaterialThemeExample {
  protected readonly value = signal<string | undefined>(undefined);

  protected readonly colors: CngxSelectOptionDef<string>[] = [
    { value: 'red', label: 'Red' },
    { value: 'green', label: 'Green' },
    { value: 'blue', label: 'Blue' },
    { value: 'amber', label: 'Amber' },
    { value: 'violet', label: 'Violet' },
  ];
}
export { MaterialThemeExample as AppComponent };

CngxActionSelect

Import#

Description#

Related#

Metadata#

Host#

Providers#

Relationships

Depends on12

Index#

Properties

Methods

Inputs

Outputs

Derived State

HostBindings

Inputs#

Outputs#

Instance Properties#

Methods#

HostBindings#

Index#

Surface

Layout

State / Highlighted

State / Selected

State / Disabled

State / Loading

State / Refreshing

State / Commit

State / Overflow

State / Remove

State / Reorder

State / Dragging

State / Error

State / Trigger invalid

Surface

Layout

State / Highlighted

State / Selected

State / Disabled

State / Loading

State / Refreshing

State / Commit

State / Overflow

State / Remove

State / Reorder

State / Dragging

State / Error

State / Trigger invalid

Material theme