CngxButtonToggleGroup
cngx-button-toggle-group
projects/common/interactive/button-toggle/button-toggle-group.component.ts
Import#
import { CngxButtonToggleGroup } from '@cngx/common/interactive'
Description#
Single-select button-toggle group. Owns a value = model<T | undefined> (the canonical single-value source) and exposes the
parent contract via CNGX_BUTTON_TOGGLE_GROUP. Behaves as a W3C
APG radiogroup - arrow keys move focus AND select (auto-select
variant); Tab + programmatic focus do not select on focus alone;
Space and Enter select the currently-focused toggle.
Mode is static: this component is the single-select half of a
deliberate split (per feedback_select_family_split). Consumers
pick <cngx-button-toggle-group> for radiogroup semantics or
<cngx-button-multi-toggle-group> for toolbar semantics - never a
runtime [selectionMode] flag, never a shape-shifter. The leaf
CngxButtonToggle injects EITHER this token OR
CNGX_BUTTON_MULTI_TOGGLE_GROUP ({ optional: true } on both)
and chooses its ARIA pattern at injection time, not at runtime.
Auto-select wiring follows the same contract as CngxRadioGroup:
the host CngxRovingTabindex raises its navigation-key intent before
it moves focus; each focused leaf consumes that intent in its
(focus) handler via consumePendingArrowSelect(), which reads
roving.consumeNavigationKey(). Reading an already-set fact (instead
of a group-owned (keydown) flag) closes the one-press-behind race
(#135). The value write happens inside a DOM event handler - never
inside an effect().
<cngx-button-toggle-group label="Layout" [(value)]="view">
<button cngxButtonToggle value="grid">Grid</button>
<button cngxButtonToggle value="list">List</button>
<button cngxButtonToggle value="table">Table</button>
</cngx-button-toggle-group>Metadata#
Host#
Providers#
CNGX_BUTTON_TOGGLE_GROUP- useExisting
CngxButtonToggleGroup CNGX_CONTROL_VALUE- useExisting
CngxButtonToggleGroup CNGX_FORM_FIELD_CONTROL- useExisting
CngxButtonToggleGroup
Relationships
Index#
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-orientation] | orientation() |
[attr.aria-busy] | ariaBusy() ? "true" : null |
[class.cngx-button-toggle-group--horizontal] | orientation() === "horizontal" |
HostListeners#
| Event | Handler |
|---|---|
(focusin) | focusin() |
(focusout) | focusout() |
Default visuals for the shared button-toggle group container.
The host carries either .cngx-button-toggle-group (single-select
CngxButtonToggleGroup) or .cngx-button-multi-toggle-group
(multi-select CngxButtonMultiToggleGroup). Children sit flush so
the row reads as a segmented control.
Variants
--horizontal- flex-direction row (the default); a:not()rule on the scope root flips to column when this class is absent
Inheritance
Layout tokens cascade through the foundation:
--cngx-button-toggle-group-gap- direct (defaults to0)--cngx-button-toggle-group-radius->--cngx-radius-md
Index#
Layout
*0Gap between toggle children. Zero by default so the buttons read as a segmented control.
*0.375remCorner radius of the group container. Defaults to --cngx-radius-md.