OTP Input for Angular

import { AuiOtpInput } from '@absoluteui/angular/otp-input';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AuiOtpInput } from '@absoluteui/angular/otp-input';

@Component({
  selector: 'app-verify',
  imports: [ReactiveFormsModule, AuiOtpInput],
  template: `<aui-otp-input label="Verification code" [required]="true" [formControl]="code" (completed)="verify()"></aui-otp-input>`,
})
export class VerifyComponent {
  readonly code = new FormControl('', { nonNullable: true });
  verify(): void {
    // Send this.code.value to your server.
  }
}

`<aui-otp-input>`

Class AuiOtpInput; template reference #ref="auiOtpInput".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is string. 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 (required accessible name).
`hideLabel`	`boolean`	`false`	Visually hide the label.
`length`	`number`	`'6'`	Number of characters (1..32).
`type`	`OtpInputType`	`'numeric'`	Allowed characters.
`mask`	`boolean`	`false`	Show dots instead of characters (PINs); the input becomes type=password.
`uppercase`	`boolean`	`false`	Alphanumeric only: convert letters to upper case.
`groupSize`	`number`		Visual group size (separators are presentation only).
`name`	`string`		Form field name.
`description`	`string`		Help text, referenced by aria-describedby.
`required`	`boolean`	`false`	A code is required.
`disabled`	`boolean`	`false`	Disabled.
`readOnly`	`boolean`	`false`	Read-only.
`autocomplete`	`"off" \| "one-time-code"`	`'one-time-code'`	Autofill hint.
`validate`	`(value: string) => string \| null`		Consumer validation of a complete code.
`icons`	`Partial<OtpInputIcons>`		Icon slot overrides.
`validationTiming`	`ValidationTiming`	`'blur'`	When validation messages first appear; afterwards they update live.
`locale`	`string`	`'en-US'`	Message and number-formatting locale.

Two-way bindings

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

Outputs

Output	Payload	Description
`(valueInput)`	`OtpInputValueDetail`	User edited the code (the code is not in the detail). Re-emits `aui-input`.
`(changed)`	`OtpInputValueDetail`	User committed the value (native change). Re-emits `aui-change`.
`(completed)`	`OtpInputCompleteDetail`	The code became complete through user input (typing, paste, or autofill). Re-emits `aui-complete`.

Read-only state

Property	Type	Description
`complete`	`Signal<boolean>`	Every cell filled.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`getFormValue(): string \| undefined`	The code.
`clear(): void`	Empty the code and focus the field (after a rejected code).
`reportValidity(): boolean \| undefined`	Show messages now (marks the control submitted) and return validity.
`setCustomError(message: string \| null): void`	External error (server, cross-field rule); null clears it.
`focus(): void`	Move focus to the primary focusable element.
`reset(): void`	Restore the initial value and clear dirty/touched/submitted state.