Components / Input OTP

Input OTP

A single accessible one-time-code input presented as readable character slots.

Verification code

Paste the six-character code sent to your email.

example.component.html

html

<aevko-input-otp label="Verification code" [maxLength]="6" [(value)]="code" />

Installation

npx aevko-ui@latest add input-otp --yes

Source ownership

Customization

Bind through value or Angular Forms, choose a character rule and edit the local slot geometry without splitting the accessible input into several fields.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible name for the single native input.
`maxLength`	`number`	`6`	Number of accepted and displayed characters.
`characters`	`RegExp`	`/[0-9A-Za-z]/`	Per-character acceptance rule.
`value`	`model<string>`	`''`	Current code; also supports Angular Forms.
`disabled / invalid`	`boolean`	`false`	Form and validation states.

Accessibility contract

Accessibility

Included behavior

One native input owns the accessible name, paste, backspace and autofill behavior; visual slots stay decorative.

Your responsibility

Explain where the code was sent, allow password-manager/autofill behavior and surface validation outside the decorative slots.

Back to all components