Field
Accessible label, hint, error and control-state composition that leaves value and validation ownership with Angular Forms.
GET STARTED
Import
Import only the standalone declarations used by the composition.
Basic composition
One stable controlId connects the label, native control and every description without handwritten IDs.
Angular Forms
Field owns accessible presentation only. Signal Forms, Reactive Forms and template-driven forms continue to own the actual value and validation lifecycle.
Inherited states
State is synchronized to visual hooks, data attributes, ARIA and compatible native attributes from one source.
Native control bridge
Use neuralFieldControl when a projected native or compatible custom control does not consume Field context directly.
Multiple descriptions
Multiple hints, errors and application-owned IDs are deduplicated into one reactive aria-describedby relationship.
Workspace slugs are public.
Unstyled ownership
Visual classes disappear while structural hooks, generated IDs, ARIA relationships and native state propagation remain.
ACCESSIBILITY
Field accessibility
Field turns projected content into one deterministic accessible relationship without replacing native form semantics.
Relationships
neuralFieldLabel receives the control's for; hints and errors contribute IDs to aria-describedby. Conditional slots update the relationship reactively.
Deterministic IDs
Required controlId produces stable SSR and hydration-safe IDs: -hint, -error, then numbered suffixes for additional slots.
Error announcements
neuralFieldError defaults to polite announcements. Use assertive only for genuinely urgent feedback, or off when an application-level summary announces the same error.
Responsibility boundary
Field never owns values, executes validation, translates messages or decides when feedback becomes visible. Keep those decisions in the form schema and application policy.
PUBLIC CONTRACT
Field API
Canonical standalone declarations and their beta contracts.
Declarations
| Name | Kind | Purpose |
|---|---|---|
| NeuralField | Component | Field context and visual state host. |
| NeuralFieldLabel | Directive | Connects a visible label to the control. |
| NeuralFieldControl | Directive | Bridges native/custom controls. |
| NeuralFieldHint | Directive | Adds a described-by hint slot. |
| NeuralFieldError | Directive | Adds announced correction feedback. |
Field inputs
| Input | Type | Default | Purpose |
|---|---|---|---|
| controlId | string | required | Stable control and slot ID prefix. |
| describedBy | string | '' | External description IDs. |
| invalid | boolean | false | Synchronizes invalid presentation and ARIA. |
| required | boolean | false | Adds marker, ARIA and native required. |
| disabled | boolean | false | Disables the participating control. |
| readonly | boolean | false | Marks the control readonly. |
| pending | boolean | false | Exposes busy validation state. |
| fluid | boolean | false | Fills the available inline width. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
Directive inputs
Only NeuralFieldError adds an input: live: 'off' | 'polite' | 'assertive', defaulting to polite. Other directives derive their complete contract from Field context.
State and structural hooks
neural-field-root, neural-field--invalid, --required, --disabled, --readonly, --pending and the neural-field__* slot hooks remain available in styled and unstyled modes.
DESIGN SYSTEM
Field tokens
Component tokens inherit the active primary, surface and color-mode foundation.
Design tokens
--neural-field-gapSpacing between field items.
--neural-field-widthField inline size.
--neural-field-colorField foreground color.
--neural-field-font-familyField font family.
--neural-field-label-gapSpacing between label items.
--neural-field-label-colorLabel foreground color.
--neural-field-label-font-sizeLabel font size.
--neural-field-label-font-weightLabel font weight.
--neural-field-label-line-heightLabel line height.
--neural-field-required-colorRequired foreground color.
--neural-field-required-contentGenerated marker appended to labels for required fields.
--neural-field-message-font-sizeMessage font size.
--neural-field-message-line-heightMessage line height.
--neural-field-hint-colorHint foreground color.
--neural-field-error-colorError severity foreground color.
--neural-field-error-font-weightError severity font weight.
--neural-field-disabled-opacityDisabled opacity.
--neural-field-pending-cursorPending pointer cursor.