OTP PIN Input: Premium Forms Component by Arsalan Ali

A production-ready code component for any flow that needs a digit code — OTP verification, PIN entry, two-factor authentication, or access passcodes. Dark-first, zero dependencies, and keyboard accessible out of the box. Correct Pin - 224466

About this Component

OTP Pin Input is a six-digit (customizable)segmented input built for design-forward Framer projects. Whether you're building an email verification screen, a SMS authentication flow, a PIN lock screen, or a 2FA step — this component handles the interaction layer completely.

It ships with a custom blinking cursor that tracks the active digit, auto-advance focus on entry, backspace navigation, arrow key support, and full paste support for instant autofill. On mobile, inputmode="numeric" and autocomplete="one-time-code" trigger native SMS code suggestions on both iOS and Android.

Wrong codes trigger a horizontal shake animation, clear all fields, and display an inline error message before resetting. Correct codes lock the inputs and confirm success — no extra wiring needed for the UI states.

The component uses Barlow and Barlow Condensed with a tight dark palette, making it a natural fit for premium auth screens, SaaS onboarding flows, fintech apps, and any product where verification UI needs to feel considered rather than generic.

Swap in your validation logic, update the email hint, and it's ready to ship.