API reference
[tngInputOtp] only reflects combined OTP state onto the host. You still own the slot inputs, their keyboard handling, and their visual layout.
tngInputOtp
Primitive attachment
html
<div
tngInputOtp
[length]="6"
[value]="verificationCode()"
[disabled]="isDisabled()"
[readonly]="isReadonly()"
[invalid]="hasError()"
[focused]="isFocused()"
[focusVisible]="showFocusRing()"
[activeIndex]="activeIndex()"
></div>| Input | Type | Notes |
|---|---|---|
length | number | Total slot count. The primitive normalizes it to a safe 1..12 range. |
value | string | Combined OTP value used to derive empty, partial, and complete state hooks. |
activeIndex | number | null | Reflects the currently active slot through data-active. |
disabled, readonly, required, invalid, focused, focusVisible | boolean | Mirrors your external interaction state into stable host attributes. |
Reflected state
The primitive adds data-empty, data-partial, data-complete, data-disabled, data-readonly, data-required, data-invalid, data-focused, data-focus-visible, and data-active so your page CSS can react without custom DOM bookkeeping.
Ownership notes
- The primitive does not render slot inputs for you.
- You decide how characters are sanitized and how focus advances.
- Reach for the component wrapper when you want that behavior prebuilt.