Input OTP

A one-time-password box input.

import { BuiInputOtp } from 'ng-blatui';

<bui-input-otp [(value)]="code" [maxlength]="6" />

Four digits

<bui-input-otp [maxlength]="4" ariaLabel="4-digit code" />

<bui-input-otp [maxlength]="6" [alphanumeric]="true" />

<bui-input-otp [value]="'123'" [maxlength]="6" [disabled]="true" />

<!-- groupSize inserts a separator every N boxes -->
<bui-input-otp [(value)]="otp" [maxlength]="6" [groupSize]="3" />

Prop	Type	Default	Description
`maxlength`	`number`	`6`	Number of character boxes (length of the code).
`alphanumeric`	`boolean`	`false`	Whether to allow letters as well as digits.
`groupSize`	`number`	`0`	Insert a visual separator after every N boxes (0 = none).
`ariaLabel`	`string`	`'One-time password'`	Base accessible label; each box appends its position.

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`string`	`''`	Current code. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether the input is disabled. Two-way bindable with `[(disabled)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.