OtpInput Component synced with Web Awesome 3.7.0

OTP inputs collect one-time passcodes, PINs, and other fixed-length codes, one character per segment. Use them for SMS verification, two-factor authentication, and invite codes.

Overview

Import

Import the otpInput directive from the angular-awesome package:

// Import the otpInput directive
import { WaOtpInputDirective } from 'angular-awesome/otp-input';

Examples

WaOtpInputDirective Usage Examples

Basic Usage

A six-digit numeric one-time passcode.

<wa-otp-input label="Verification code"></wa-otp-input>

Two-Way Binding with ngModel

<wa-otp-input [(ngModel)]="code" [length]="6" required></wa-otp-input>
<p>Entered: {{ code }}</p>

code = '';

Reactive Forms

<form [formGroup]="form">
  <wa-otp-input formControlName="otp" [length]="6" required></wa-otp-input>
  <p *ngIf="form.controls.otp.hasError('incomplete')">Enter all 6 digits.</p>
</form>

form = this.fb.group({
  otp: ['', [Validators.required]]
});

Formatted Segments

Use format with # placeholders and literal separators. The segment count is derived from the number of # characters.

<wa-otp-input format="###-###" label="Invite code"></wa-otp-input>

Alphanumeric and Case Handling

<wa-otp-input type="alphanumeric" case="upper" [length]="8"></wa-otp-input>

Masked Entry

<wa-otp-input mask withMask maskChar="•" [length]="4" label="PIN"></wa-otp-input>

Auto-Submit and Completion

<wa-otp-input autosubmit (waComplete)="onComplete($event)"></wa-otp-input>

onComplete(event: CustomEvent) {
  // Cancel to prevent automatic form submission for this completion
  // event.preventDefault();
  console.log('Code complete:', (event.target as any).value);
}

Styling the Segments

<wa-otp-input
  appearance="filled"
  segmentSize="3em"
  segmentGap="0.5em"
  segmentBorderRadius="0.5em"
  [length]="6"
></wa-otp-input>

API Reference

Styling