Number Input for Angular

import { AuiNumberInput } from '@absoluteui/angular/number-input';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiNumberInput } from '@absoluteui/angular/number-input';

@Component({
  selector: 'app-order',
  imports: [ReactiveFormsModule, AuiNumberInput],
  template: `<aui-number-input label="Quantity" [min]="1" [max]="99" [step]="1" [required]="true" [formControl]="quantity"></aui-number-input>`,
})
export class OrderComponent {
  readonly quantity = new FormControl<number | null>(1, { validators: [Validators.required, Validators.min(1), Validators.max(99)] });
}

<aui-number-input>

Class AuiNumberInput; template reference #ref="auiNumberInput".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor and Validator; the form value is number \| null. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label and accessible name.
hideLabel	boolean	false	Visually hide the label; it remains the accessible name.
name	string		Form field name, set on the hidden input that carries the canonical value.
placeholder	string		Supplementary hint; never replaces the label.
description	string		Help text referenced by aria-describedby.
required	boolean	false	Empty value is invalid; shows the required indicator.
disabled	boolean	false	Disables the input and steppers; the value is not submitted.
readOnly	boolean	false	Value is focusable and submitted but not editable or steppable.
min	number		Minimum value; also the step base and the Home target.
max	number		Maximum value; End goes to the largest on-grid value <= max.
step	number | null	'1'	Increment and step-validation grid (base min ?? 0). Default 0.01 for percent style. null: any value, increments of 1.
format	NumberInputFormat		Display format (Intl.NumberFormat subset). maximumFractionDigits also rounds the value on commit.
validate	(value: number | null) => string | null		Consumer validation; return a message to mark the value invalid.
icons	Partial<NumberInputIcons>		Icon slot overrides.
validationTiming	ValidationTiming	'blur'	When validation messages first appear; afterwards they update live.
showSteppers	boolean	true	Render increase/decrease buttons (pointer affordance; keyboard users use the arrow keys).
locale	string	'en-US'	Parsing, formatting, and message locale.

Two-way bindings

Model	Type	Change output	Description
[(value)]	number | null	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(valueInput)	NumberInputInputDetail	User typed, or stepped (keyboard or stepper buttons, since 0.9.0); value is the parse of the raw text. Re-emits aui-input.
(changed)	NumberInputValueDetail	User committed a changed value (blur, Enter, arrow/page/Home/End keys, or a stepper button). Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
reportValidity(): boolean | undefined	Show messages now and return validity.
setCustomError(message: string | null): void	External error (server, cross-field rule); cleared when the user edits.
getFormValue(): number | null | undefined	Value for form serialization.
focus(): void	Focus the input.
reset(): void	Restore the initial value and clear dirty/touched/submitted state.

Test harness

AuiNumberInputHarness from @absoluteui/angular/testing. <aui-number-input>: typing and the spin button keys.