Input OTP
Accessible one-time password input with composed slots, paste handling, and grouped verification layouts.
Installation
$npx maddex add InputOTP
Basic
Start with the uncontrolled six-digit layout from the Maddex composition: grouped slots with a separator in the middle.
Preview
Enter the verification code
Type or paste across the full field and the active slot advances automatically.
Controlled
Bind the value with on-change when the current PIN needs to stay in sync with surrounding page state.
Preview
PIN: {controlledPin || 'Empty'}
{controlledPin.length === 4 ? 'PIN ready to submit.' : 'Type the remaining digits or load the demo value.'}
Alphanumeric
Swap the pattern to accept letters and numbers when the code is an invite token, redeem key, or product license.
Preview
Invite code
Accepts letters and numbers for invite codes, redeem tokens, and short product keys.