Form Field for Angular

import { AuiFormField } from '@absoluteui/angular/form-field';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Form Field page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { formField: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiFormField } from '@absoluteui/angular/form-field';

@Component({
  selector: 'app-guests',
  imports: [ReactiveFormsModule, AuiFormField],
  template: `
    <aui-form-field label="Number of guests" description="Up to 8 people" [required]="true">
      <input type="number" name="guests" min="1" max="8" [formControl]="guests" />
    </aui-form-field>`,
})
export class GuestsComponent {
  readonly guests = new FormControl<number | null>(null, { validators: [Validators.required, Validators.min(1), Validators.max(8)] });
}

<aui-form-field>

Class AuiFormField; template reference #ref="auiFormField".

AbsoluteUI Form Field around a projected native control: <aui-form-field label="ZIP"><input formControlName="zip" required></aui-form-field>. The native control keeps Angular’s own value accessor; AbsoluteUI adds the label, help text, and localized validation messages.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label and accessible name (<label for> the control).
hideLabel	boolean	false	Visually hide the label; it remains the accessible name.
description	string		Help text referenced by aria-describedby.
required	boolean		Sets the native required property and the indicator. When omitted, the control’s own required attribute is used.
validate	(value: FormFieldValue) => string | null		Consumer validation after native constraints; return a message to mark the value invalid. string[] for <select multiple>.
validationTiming	ValidationTiming	'blur'	When validation messages first appear; afterwards they update live.
locale	string	'en-US'	Message and number-formatting locale.
icons	Partial<FormFieldIcons>		Icon slot overrides.

Outputs

Output	Payload	Description
(valueInput)	FormFieldChangeDetail	Native input event on the control. Re-emits aui-input.
(changed)	FormFieldChangeDetail	Native change event on the control. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
reportValidity(): boolean	Show messages now; true when valid.
setCustomError(message: string | null): void	External error (server, cross-field rule); cleared when the user edits.
refresh(): void	Re-read the control’s constraints after changing them outside AbsoluteUI.
focus(): void	Focus the wrapped control.
reset(): void	Clear touched state and messages.