ComponentsForm Controls

Input OTP

Form Controls components with live demos, API references, and tokens.

One-time codes without losing native behavior

PMatInputOtp combines one native input per character into one Angular Forms string. It supports numeric and alphanumeric codes, masking, paste, SMS autofill, custom cells, and exact-length validation.

Paste the full code or type one digit per cell.
Waiting for 6 digits
HTML

Behavior

  • Typing advances; paste and browser autofill distribute the code.
  • Arrow keys, Home, End, Backspace, and Delete keep cell navigation predictable.
  • The first cell advertises one-time-code; numeric mode requests a mobile number pad.
  • Reactive, template-driven, and direct value binding use one string model.