Skip to main content
cngx-src documentation

CngxSelectDivider

ComponentOnPushv0.1.0WCAG AA

projects/forms/select/declarative/divider.component.ts

Import#

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

Description#

Visual separator between groups / options. Native <select> allows <hr>; we ship a dedicated element for clean CSS ownership and AT ignores it via role="presentation" + aria-hidden.

Usage: inside a consumer-assembled listbox (compose-yourself path) or as a direct child of <cngx-select-shell>. Not supported inside data-mode <cngx-select> (consumes via [options]).

<div cngxListbox>
  <cngx-option [value]="'a'">A</cngx-option>
  <cngx-select-divider />
  <cngx-option [value]="'b'">B</cngx-option>
</div>

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

Metadata#

Host#

Default visuals for the declarative <cngx-select-divider> - a thin horizontal rule rendered between projected options inside a declarative listbox. Host-only; no slots, no modifiers.

Inheritance

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

  • --cngx-select-divider-color -> --cngx-color-border
  • --cngx-select-divider-margin - hardcoded 0.25rem 0