Two-Factor Code Input
Input field for 2FA code entry
SaaSAuth
Overview
TwoFactorCodeInput renders a series of single-digit input fields for entering TOTP verification codes. It supports auto-advance on typing, backspace navigation, full-code paste, configurable length (4-8 digits), error states, and accessible ARIA labels.
Usage
import { TwoFactorCodeInput } from "@leanicon/web-builder-library/saas";
<TwoFactorCodeInput onComplete={(code) => handleVerify(code)} autoFocus />;Variants
Default
Four Digits
Eight Digits
With Error
Invalid verification code. Please try again.
Disabled
No Auto Focus
Custom ARIA Label
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
onComplete | (code: string) => void | — | Yes | |
onChange | ((code: string) => void) | — | No | |
length | number | 6 | No | |
disabled | boolean | false | No | |
error | string | — | No | |
autoFocus | boolean | true | No | |
ariaLabel | string | Verification code | No | |
className | string | — | No |