Home/Components/Input OTP

Input OTP

Six-digit code input. One box per digit. Used for two-factor codes, magic-link verification, and supervisor-PIN flows.

Stable .input-otp 6 digitsAuto-advance

Usage

Six 44 × 52 boxes with a gap. Auto-advance on digit; backspace goes back.

2
8
4
1
OTP focused at digit 5

States

Empty
2
8
4
1
9
7
Filled
2
8
4
1
9
7
Invalid
aria-invalid

Do & don't

Do

Support paste — the operator can paste the whole code at once.

Don't

Make the boxes smaller than 36 px. Mobile keyboards need a tap target.

Do

Auto-submit when the last digit is entered, with a 200 ms grace window.

Don't

Mask the digits. Operators need to verify what they typed.