InputOtp
A secure one-time-code experience with native autofill, fast paste, deterministic keyboard behavior and one string model across every Angular Forms API.
GET STARTED
Import
Import the canonical standalone component from its granular entry point.
Verification code
Type, paste or use platform autofill. Every native cell contributes to one string model and complete fires when all cells are ready.
Alphanumeric, separator and mask
Recovery codes can accept Unicode letters and numbers. Separators are visual only; masking conceals cells without changing the string model.
Every Angular Forms API
Signal Forms, Reactive Forms and template-driven Forms share the same string contract.
States and Field composition
Disabled, readonly, required, invalid, pending, touched, dirty, fluid and unstyled states compose with Neural Field.
Unstyled and typed class slots
Unstyled retains paste, autofill, Forms and accessibility while consumer classes own every visual element.
INPUTOTP
Accessibility
Native single-character inputs remain individually operable inside one named group.
Group and cell semantics
The root is a named role="group". Every cell announces its position and total; required, invalid and busy states are exposed without replacing native inputs.
Keyboard
Backspace clears or returns, Delete clears in place, arrows move logically, and Home/End jump to boundaries. Arrow behavior reverses correctly in RTL.
Autofill and paste
Only the first cell requests one-time-code. Platform autofill and multi-character paste are sanitized and distributed from the active cell.
Security boundary
Masking only reduces shoulder-surfing. Verification, expiration, replay protection, retry limits and rate limiting must run on the server.
INPUTOTP
API
The complete public contract of NeuralInputOtp.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | Canonical complete-code model. |
| length | number | 6 | Positive number of native cells. |
| mode | 'numeric' | 'alphanumeric' | 'numeric' | Accepted character grammar. |
| mask | boolean | false | Conceals cells; does not encrypt. |
| separator | string | '' | Presentational text between cells. |
| autocomplete | string | 'one-time-code' | First-cell autofill purpose. |
| inputMode | string | '' | Virtual keyboard override. |
| autoFocus | boolean | false | Focuses first empty cell after render. |
| disabled | boolean | false | Disables all native cells. |
| readonly | boolean | false | Prevents editing while remaining focusable. |
| required | boolean | false | Exposes required semantics. |
| invalid | boolean | false | Exposes invalid state. |
| pending | boolean | false | Exposes busy state. |
| touched / dirty | boolean | false | External Forms state hooks. |
| name | string | '' | Adds a hidden native form value. |
| inputOtpId | string | '' | Stable group and cell ID prefix. |
| ariaLabel | string | '' | Accessible group name override. |
| cellAriaLabel | string | '' | Localized {current}/{total} template. |
| fluid | boolean | false | Fills available width. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
| inputOtpClass / inputClass | string | '' | Consumer root and cell classes. |
| classes | NeuralInputOtpClasses | {} | Typed visual slots. |
Events
valueChangestringGenerated model output.
completeNeuralInputOtpCompleteEventEvery cell is filled.
touchvoidFocus leaves the complete group.
Methods
focus(options?)Focuses the first empty cell, or the last cell.
select()Focuses and selects the first cell.
reset()Clears the string model.
Typed class slots
rootgroupinputseparatorValue contract
Application state is one sanitized string. Separators and masking never enter the model, and verification never belongs to the UI component.
INPUTOTP
Design tokens
Neutral, dark mode and experimental themes share the same component-token surface.
Component tokens
--neural-input-otp-widthControl inline size.
--neural-input-otp-input-sizeInput width and height.
--neural-input-otp-gapSpacing between control items.
--neural-input-otp-colorControl foreground color.
--neural-input-otp-backgroundControl background surface.
--neural-input-otp-background-hoverHovered control background surface.
--neural-input-otp-borderControl border shorthand.
--neural-input-otp-border-color-hoverHovered control border color.
--neural-input-otp-border-color-focusFocused control border color.
--neural-input-otp-border-color-invalidInvalid control border color.
--neural-input-otp-radiusControl corner radius.
--neural-input-otp-shadowControl box shadow.
--neural-input-otp-shadow-focusFocused control box shadow.
--neural-input-otp-focus-ringControl keyboard focus ring.
--neural-input-otp-focus-ring-offsetControl focus ring offset.
--neural-input-otp-separator-colorSeparator foreground color.
--neural-input-otp-disabled-opacityDisabled opacity.
--neural-input-otp-transitionControl CSS transition.