CngxLabel

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/forms/field/label.component.ts

Import#

import { CngxLabel } from '@cngx/forms/field'

Description#

Label for a cngx-form-field. Sets for and id automatically.

When withRequiredMarker() is configured globally, the label auto-appends the required indicator for required fields. Override per-label with [showRequired]="false".

CSS classes:

cngx-label--required - when the field has a required validator
cngx-label--error - when errors are visible (touched AND invalid)
cngx-label--disabled - when the field is disabled

Global required marker (no per-label code needed)

provideFormField(withRequiredMarker())

<label cngxLabel>E-Mail</label>
<!-- renders: E-Mail * -->

Opt-out per label

<label cngxLabel [showRequired]="false">Optional Field</label>

Manual marker (without global config)

<label cngxLabel>E-Mail <cngx-required /></label>

https://cngxjs.github.io/cngx/examples/#/forms/field/label/basic https://cngxjs.github.io/cngx/examples/#/forms/field/label/required-marker https://cngxjs.github.io/cngx/examples/#/forms/field/label/error-and-disabled-classes https://cngxjs.github.io/cngx/examples/#/forms/field/label/show-required-override

Metadata#

Selector: [cngxLabel]
Export as: cngxLabel
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Style URLs: ./label.component.css

Host#

Class: cngx-label
Static attributes: [attr.for]presenter.inputId()
[id]presenter.labelId()
Bound classes: cngx-label--required ← presenter.required() cngx-label--error ← presenter.showError() cngx-label--disabled ← presenter.disabled()

Index#

Inputs#

showRequired#boolean | undefined

input()

Override whether the auto-required marker is shown on this label. Defaults to undefined (uses global config). Set false to opt out.

Instance Properties#

required#unknown

Readonly

Whether the associated field is required.

this.presenter.required

HostBindings#

Binding	Expression
`[attr.for]`	`presenter.inputId()`
`[id]`	`presenter.labelId()`
`[class.cngx-label--required]`	`presenter.required()`
`[class.cngx-label--error]`	`presenter.showError()`
`[class.cngx-label--disabled]`	`presenter.disabled()`

Default visuals for the [cngxLabel] attribute directive. The host is the consumer's <label> (or any element they pick) and carries .cngx-label; the nested .cngx-label__required span projects the required marker.

Slots

.cngx-label - host element, kept display: inline so the marker sits next to the label text instead of breaking out of grid / flex parents (display: contents would push children up and land the marker on its own row in stacked-field layouts)
.cngx-label__required - required-marker glyph, colored from the danger chain and margin-started by 0.125em from the label text

Inheritance

The required-marker token is shared with CngxRequired so both atoms render the same semantic marker:

--cngx-field-required-color -> --cngx-field-error-color -> --cngx-color-danger

A :root delegating rule pins the token to --cngx-color-danger so a dark-mode swap on the foundation token cascades through.

State / Required

--cngx-field-required-color#<color>

Default value oklch(0.55 0.21 27)

Color of the required-marker glyph next to the label. Falls back through --cngx-field-error-color and then --cngx-color-danger.

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