CngxChipGroup
cngx-chip-group
projects/common/interactive/chip-group/chip-group.component.ts
Import#
import { CngxChipGroup } from '@cngx/common/interactive'
Description#
Single-select chip group. Owns a selected = model<T | undefined>
(the canonical single-value source) and exposes the parent contract
via CNGX_CHIP_GROUP_HOST. Behaves as a role="listbox" with
CngxRovingTabindex-driven keyboard navigation; consumers project
<cngx-chip cngxChipInGroup> children that derive their own
aria-selected from this group's isSelected(value).
Mode is static per feedback_select_family_split: this is the
single-select half of a deliberate split. Consumers pick
<cngx-chip-group> for single-pick semantics or
<cngx-multi-chip-group> for multi-pick semantics - never a
runtime [selectionMode] flag.
value is a structural alias of selected so the group satisfies
CngxControlValue<T | undefined> without owning two synchronised
models - both names point to the same ModelSignal<T | undefined>
instance. Mirrors CngxCheckboxGroup's selectedValues / value
pairing.
[state] accepts CngxAsyncState<unknown> for async-loaded chip
lists; reactively drives aria-busy so AT announces the busy
moment without consumer wiring. Slot directives for
skeleton/empty/error are deferred - the harmonized Phase 3-4 group
surface ships only the aria-busy projection of [state], and
chip-group follows that precedent for cross-family consistency
(plan deviation 2026-05-01: skeleton/empty/error slot directives
declared in the plan body are dropped at execute time pending a
cross-family harmonization pass).
Per Pillar 1 (Ableitung statt Verwaltung), aria-busy is a
computed() from state.status() - never a manual write. Per
Pillar 3 (Komposition statt Konfiguration), the group composes
CngxRovingTabindex and emits no implicit children - consumers
project chip rows themselves.
<cngx-chip-group label="Size" [(selected)]="size">
<cngx-chip cngxChipInGroup [value]="'sm'">Small</cngx-chip>
<cngx-chip cngxChipInGroup [value]="'md'">Medium</cngx-chip>
<cngx-chip cngxChipInGroup [value]="'lg'">Large</cngx-chip>
</cngx-chip-group>Metadata#
Host#
Providers#
CNGX_CHIP_GROUP_HOST- useExisting
CngxChipGroup CNGX_CONTROL_VALUE- useExisting
CngxChipGroup CNGX_FORM_FIELD_CONTROL- useExisting
CngxChipGroup
Relationships
Index#
Properties
Derived State
HostBindings
Inputs#
string | nullOptional id of an external error message element. When set, the
host emits aria-errormessage="<id>"; consumers MUST render an
element with that id. Default null skips the attribute.
Note: WAI-ARIA dictates that AT ignores this attribute when
aria-invalid is absent or "false", so a stable always-emitted
id is harmless when the field is valid.
nullBridge-writable invalid state. model<boolean> mirrors disabled
so external integrations (RF/Signal-Forms bridges, custom validity
adapters) can drive it without a parallel API path - consumers
typically read only.
falsestring | undefinedT | undefinedOutputs#
Bridge-writable invalid state. model<boolean> mirrors disabled
so external integrations (RF/Signal-Forms bridges, custom validity
adapters) can drive it without a parallel API path - consumers
typically read only.
T | undefinedInstance Properties#
Methods#
HostBindings#
| Binding | Expression |
|---|---|
[attr.id] | id() |
[attr.aria-label] | label() |
[attr.aria-disabled] | disabled() ? "true" : null |
[attr.aria-required] | required() ? "true" : null |
[attr.aria-invalid] | (invalid() || errorState()) ? "true" : null |
[attr.aria-errormessage] | errorMessageId() |
[attr.aria-busy] | ariaBusy() ? "true" : null |
[class.cngx-chip-group--horizontal] | orientation() === "horizontal" |
HostListeners#
| Event | Handler |
|---|---|
(focusin) | focusin() |
(focusout) | focusout() |
Default visuals for CngxChipGroup. The host carries
.cngx-chip-group and frames a flex layout for projected
<cngx-chip> children. Stacks vertically by default.
Variants
--horizontal- flips to a row withflex-wrap: wrapso chips fold to additional lines instead of overflowing
Inheritance
Gap cascades through the foundation:
--cngx-chip-group-gap->--cngx-space-sm
Layout
*0.5remGap between chip children. Falls back to --cngx-space-sm.