Skip to main content
cngx-src documentation

CngxOtpInput

DirectivePrimaryv0.1.0WCAG AA

projects/forms/input/otp-input.directive.ts

GitHub

Import#

import { CngxOtpInput } from '@cngx/forms/input'

Description#

Container directive for OTP/PIN input with auto-advance.

Renders no inputs - the consumer provides <input [cngxOtpSlot]="i" /> elements inside the container.

<div cngxOtpInput [length]="6" #otp="cngxOtpInput" (completed)="verify($event)">
  @for (i of otp.indices(); track i) {
    <input [cngxOtpSlot]="i" />
  }
</div>

https://cngxjs.github.io/cngx/examples/#/forms/input/otp/4-digit-pin https://cngxjs.github.io/cngx/examples/#/forms/input/otp/6-digit-otp

Related#

Metadata#

Selector
[cngxOtpInput]
Export as
cngxOtpInput

Host#

Static attributes
rolegroup
[attr.aria-label]groupLabel()

Index#

Methods

clearfocusAt

Inputs

inputTypelength

Outputs

completedvalueChange

Derived State

groupLabelindicesisCompletevalue

HostBindings

attr.aria-label

Inputs#

inputType#"text" | "number" | "password"
input()

Input type for each slot: 'text' (default), 'number' (numeric keyboard), or 'password' (masked).

default 'text'
length#number
input()

Number of input fields.

default 6

Outputs#

completed#string
output()

Emitted when all positions are filled.

valueChange#string
output()

Emitted when value changes.

Methods#

clear#void

Clears all inputs and focuses the first.

focusAt#void
focusAt(index: number)

Focuses the input at the given index.

@paramindexnumber

HostBindings#

BindingExpression
[attr.aria-label]groupLabel()
Enter to selectArrow Down Arrow Up to navigateEsc to close