FormField

Associate a label, hint, error and text addons with a projected control.

Category: Forms and selection
Import: @neural-ui/core/form-field
Selector: neu-form-field

import { NeuFormFieldComponent } from '@neural-ui/core/form-field';

Usage

Project your input or textarea. forId must match the actual control id; id sets a stable base for label, hint and error IDs. Export the field as neuFormField and connect labelId() and mergeDescribedBy() to the native control. prefix and suffix add text beside it. error renders an alert but does not validate or change the child control automatically.

Examples

Try the behavior and open Code for the implementation.

Amount

€

EUR

Enter the amount before tax.

The application supplies validation and connects the description IDs.

Try and configure

Change the options and try the result. The generated template follows your configuration; Code contains the complete executable source.

Amount

€

EUR

Enter the amount before tax.

Label

Hint

Error message

Prefix

Suffix

Field base ID

Control ID / forId

Projected control readonly

Projected control disabled

<neu-form-field
  #field="neuFormField"
  id="amount-field"
  forId="amount-control"
  label="Amount"
  hint="Enter the amount before tax."
  error=""
  prefix="€"
  suffix="EUR"
  size="md"
>
  <neu-number-input
    inputId="amount-control"
    size="md"
    [readonly]="false"
    [disabled]="false"
    [ariaLabelledBy]="field.labelId()"
    [ariaDescribedBy]="field.mergeDescribedBy()"
    [invalid]="!!field.error()"
    [(value)]="value"
  />
</neu-form-field>

Data and content

FormField does not own a value, validation or Outputs. The application supplies hint/error text and wires the control relationships. Native projected-control styling in the examples belongs to the application, not to a hidden FormField input.

Accessibility and keyboard

Use forId for native label activation and aria-labelledby when needed. mergeDescribedBy() combines your existing description IDs with the field hint/error IDs without duplicates. Set aria-invalid on the child when your validation reports an error. Avoid a second competing label on the projected control.

Key	Action
`Tab`	Follow the normal focus order of links, fields and actions inside the content; the container adds no roving-focus model.
`Enter`	Activate a focused native button or follow a focused link inside the content.
`Space`	Activate a focused native button inside the content; fields keep normal text editing.

API

Inputs and Outputs match the pinned package. Named types link to their definitions; each supported Template has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`error`	`string`	`''`	`[error]`	Application-supplied error text, rendered as an alert.
`forId`	`string`	`''`	`[forId]`	ID of the actual projected input for the native label.
`hint`	`string`	`''`	`[hint]`	Application-supplied descriptive help text.
`id`	`string`	`''`	`[id]`	Stable base ID for the field relationship IDs.
`label`	`string`	`''`	`[label]`	Visible label of the projected control.
`prefix`	`string`	`''`	`[prefix]`	Text addon before the control.
`size`	`NeuFormFieldSize`	`'md'`	`[size]`	Field dimension scale: sm, md or lg.
`suffix`	`string`	`''`	`[suffix]`	Text addon after the control.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Native or custom control View example	Content projection Connect the actual control ID and its label/description relationships explicitly.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Projected control

*

Reference

Use the reference printed on your invoice.

Public methods

Name	Contract
`mergeDescribedBy`	`mergeDescribedBy(...ids: Array<string \| null \| undefined>): string;`

Public Types

Open a type to inspect its definition and interface fields.

NeuFormFieldSizeTypeScript

Styles and tokens

Use public tokens for spacing, surface, text and focus. Check projected content and controls in both themes and at narrow widths.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-space-2`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.5rem`
`--neu-text-base`	Text size	Shared by other Core consumers; scope the override.	`1rem`
`--neu-text-lg`	Text size	Shared by other Core consumers; scope the override.	`1.125rem`
`--neu-text-sm`	Text size	Shared by other Core consumers; scope the override.	`0.875rem`