Overview
Selector
qz-input-otp
| Input |
Type |
Default |
Required |
Description |
length |
number |
6 |
|
|
pattern |
RegExp |
/^\d$/ |
|
|
inputMode |
"text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" |
'numeric' |
|
|
disabled |
unknown |
false |
|
Transform booleanAttribute; reads as boolean. |
readonly |
unknown |
false |
|
Transform booleanAttribute; reads as boolean. |
ariaLabel |
string |
'One-time code' |
|
|
labelledBy |
string |
'' |
|
|
Models
Two-way bindings: each model is an input and emits the matching change output.
| Model |
Type |
Default |
Required |
Change output |
Description |
value |
string |
'' |
|
valueChange |
|
Outputs
| Output |
Payload |
Description |
valueChangeCommitted |
string |
|
completed |
string |
|
Properties
| Name |
Type |
Description |
readonly composing |
WritableSignal<boolean> |
|
readonly activeSlot |
WritableSignal<number> |
|
readonly isDisabled |
Signal<boolean> |
|
readonly isComplete |
Signal<boolean> |
|
readonly slots |
Signal<InputOtpSlot[]> |
|
Public methods
setFormDisabled(disabled: boolean): void
| Parameter |
Type |
Optional |
Description |
disabled |
boolean |
|
|
onInput(event: Event): void
| Parameter |
Type |
Optional |
Description |
event |
Event |
|
|
onPaste
onPaste(event: ClipboardEvent): void
| Parameter |
Type |
Optional |
Description |
event |
ClipboardEvent |
|
|
onCompositionEnd
onCompositionEnd(event: CompositionEvent): void
| Parameter |
Type |
Optional |
Description |
event |
CompositionEvent |
|
|
updateActive
updateActive(event: Event): void
| Parameter |
Type |
Optional |
Description |
event |
Event |
|
|