CngxRadioIndicator
projects/common/display/radio-indicator/radio-indicator.component.ts
Import#
import { CngxRadioIndicator } from '@cngx/common/display'
Description#
Presentational radio indicator - circle with a centred dot when checked.
Why this exists.
The library's @cngx/forms/select panel currently composes
import('../checkbox-indicator/checkbox-indicator.component').CngxCheckboxIndicator
for both single-select ('checkmark') and multi-select ('checkbox')
indicators. The form-primitives spec (Brain vs. Skin) introduces a
radio variant - selectionIndicatorVariant: 'radio' for single-select
panels - that needs the dot-in-circle visual independently of the
box/checkmark shapes. This atom is the radio counterpart: same
decorative-only contract, same --cngx-* theming surface, same
aria-hidden="true" discipline. Future single-value form atoms in
@cngx/common/interactive will compose this same skin once they
land in their own phase.
Responsibilities (intentionally narrow).
- Render a circle frame and, when
checkedis true, a centred dot. - Express checked / disabled visual state via host classes the consumer (or upstream CSS) can theme.
- Apply size presets (
sm/md/lg) as CSS-custom-property modifiers - same scale token asCngxCheckboxIndicatorso the two atoms render at matching sizes inside a select panel.
Non-responsibilities.
- Selection state - controlled by the parent via
checked. - No
indeterminate- radios are exclusive by definition; the group enforces single-selection at the brain layer. - Interaction - no
clickoutput, no keyboard handling. The radio row (or the consuming select panel) owns the hit area. - Accessibility announcements -
aria-hidden="true"unconditionally. Selection is announced via the row'srole="radio"/aria-checkedARIA, never by this decoration.
Metadata#
Host#
Relationships
Depends on1
Index#
Inputs#
Disabled visual state. Purely cosmetic (opacity dim) - the indicator never intercepts events, so this is a hint, not a block.
falseTemplateRef | null Consumer-supplied template for the centred dot. When null (default),
the built-in <span class="cngx-radio-indicator__dot"></span> is
rendered. When set, the consumer template replaces the dot span
entirely - the __dot class is NOT applied to the custom content
(consumers own the styling of their replacement).
Convention-compatible with CngxCheckboxIndicator.checkGlyph: pass a
TemplateRef<void> obtained via #myDotTpl. Useful for
design-system overrides that want a brand-glyph dot without
forking the atom.
null"sm" | "md" | "lg"Size preset. Maps to a --cngx-radio-indicator-size custom property.
'md'HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-radio-indicator--checked] | checked() |
[class.cngx-radio-indicator--disabled] | disabled() |
[class.cngx-radio-indicator--sm] | size() === 'sm' |
[class.cngx-radio-indicator--md] | size() === 'md' |
[class.cngx-radio-indicator--lg] | size() === 'lg' |
Default visuals for CngxRadioIndicator. The host carries
.cngx-radio-indicator and renders a dot-in-circle radio glyph
built from a stroked circle plus an inner dot. The size scale
mirrors CngxCheckboxIndicator so both atoms read at identical
visual weight when placed side by side.
State modifiers
--checked- circle border + dot paint in the checked-color--disabled- opacity dim via--cngx-radio-indicator-disabled-opacity
Size variants
Each size pins --cngx-radio-indicator-size on the host; the
token carries inherits: true so the inner __circle and __dot
see the same active size:
--sm- 0.875em--md- 1em (default)--lg- 1.25em
Slots
.cngx-radio-indicator__circle- bordered ring.cngx-radio-indicator__dot- inner dot; defaults to half the ring size via acalc()fallback on the unregistered--cngx-radio-indicator-dot-sizeso it scales with each size variant. Setting the variable to a length pins the dot and opts out of auto-scaling.
Inheritance
--cngx-radio-indicator-checked-color->--cngx-color-primary(also pinned via:rootdelegation so dark-mode primary cascades without the @property initial-value shadowing the chain)--cngx-radio-indicator-color,--cngx-radio-indicator-bg,--cngx-radio-indicator-border-width- leaf tokens, inherit so host-level overrides reach the__circlechild
Reduced motion
Under prefers-reduced-motion: reduce the circle and dot
transitions are stripped to none so checking a radio is
instantaneous.
Index#
State / Checked
State / Disabled
Layout
*1emActive size of the radio glyph. inherits: true is load-bearing -
the inner __circle is a child of the host, and the size-variant
classes (--sm / --md / --lg) set this token on the host. With
inherits: false the child would only see the registered initial
value, and the size variants would render identically.
Surface
*currentColorText color of the radio glyph. Defaults to currentColor so the
indicator inherits its container's text color.
*transparentBackground of the unchecked circle. Inherited so a host-level
override reaches the __circle child that consumes it.
<length>1.5pxStroke width of the unchecked circle. Inherited so a host-level
override reaches the __circle child that consumes it.
State / Checked
<color>oklch(0.66 0.19 50)Color applied to the circle border and the inner dot when the
radio is checked. Falls back to --cngx-color-primary.
See: [[--cngx-color-primary]]
State / Disabled
<number>0.5Opacity multiplier applied by .cngx-radio-indicator--disabled.
Motion
*border-color 120ms ease,
background-color 120ms easeTransition shorthand for the circle border and dot fade.
Variant / Size
*0.875emSize token for the .cngx-radio-indicator--sm variant.
*1emSize token for the .cngx-radio-indicator--md variant (default).
*1.25emSize token for the .cngx-radio-indicator--lg variant.