Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input OTP - OTP with Loading State
A React OTP input with loading state showing Loader2 spinner and Verifying code message during verification built with shadcn/ui InputOTP
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Silent verification leaves users uncertain if code is processing. This React pattern shows InputOTP that displays Loader2 spinner with Verifying code text when 6 digits entered—auto-triggers verification with visual feedback. Built with shadcn/ui InputOTP and Lucide React Loader2 icon with animate-spin, it's perfect for auto-submit verification, showing processing status, async code checking, server validation feedback, or any OTP flow where immediate verification provides transparency about backend processing keeping users informed.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Disabled OTP State
Non-interactive disabled OTP
Error OTP State
OTP with error message
Success OTP State
OTP with success indicator
Inline Spinner
Loading spinner with text
Email Verification
Complete email verification flow
Loading Button
Button with loading state
Questions you might have
React Input OTP - Disabled OTP Input
A disabled React OTP input showing non-interactive state with reduced opacity using shadcn/ui InputOTP disabled prop
React Input OTP - OTP with Error State
A React OTP input with error state showing animate-shake animation and destructive error message for invalid codes built with shadcn/ui InputOTP