Input OTP Component

Overview

Input OTP gives each character its own slot, with a moving focus indicator and animated character entrances. Pasting a full code fills every slot at once, invalid characters are rejected, wrong codes shake with an error, and a successful check plays a wave across the slots before confirming.

Use it for account activation, two-factor login, password recovery, and transaction checks. Users should always know where the next character goes and whether their code worked, without animation slowing them down.

Theme and Interaction Customisation

Adjust box size, joined or separated slots, and corner roundness to fit compact or branded layouts. Motion options include focus-ring travel, pop or roll character entrances, paste stagger, error shake, and the success wave.

Example Production Use Case

A SaaS sign-up flow can show Input OTP right after registration. Users paste the code from their email, the backend checks it, and the slots wave green before the next onboarding step.

A banking app can use it to confirm a transfer, with a clear error and shake on a wrong code and a link to request a new one.

A login screen with two-factor authentication can support autofill on mobile, so the code from an SMS fills the slots in one tap.

Best Used For

• Account registration and email or phone verification.
• Two-factor authentication at login.
• Password recovery.
• Sensitive account actions like changing security settings.
• Transaction verification.
• Compact onboarding verification steps.

Not For

It isn’t for passwords, long credentials, or general text, since slots suit only short codes.

Don’t add OTP verification where no extra identity check is needed, because it only adds friction.

It doesn’t replace stronger options like passkeys, and it must never show success before the backend confirms the code.

Performance Budget

Update input values immediately and keep character animations to short transforms and fades. Paste must fill the real value without waiting for stagger, and error or success animations should never delay correction or progression.

Accessibility and Mobile

Treat the slots as one labelled field, with predictable typing, deletion, paste, and autofill, plus readable error and success messages. On mobile, keep slots readable without overflow and use autofill attributes, and with reduced motion remove entrances, focus travel, shake, and the success wave.

Common Mistakes

• Treating a filled code as verified.
• Delaying paste handling behind animations.
• Accepting characters that don’t match the service’s code format.
• Showing errors only through animation.
• Breaking deletion, replacement, or paste behaviour.
• Showing success before the server confirms it.
• Ignoring reduced-motion preferences.