Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input OTP - OTP with Success State
A React OTP input with success state showing Check icon and green verification message then disabling input built with shadcn/ui InputOTP
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Silent success leaves users uncertain if verification completed. This React pattern shows InputOTP that displays Check icon with Code verified successfully message in green when validation passes—then disables input preventing changes. Built with shadcn/ui InputOTP with Lucide React Check icon and text-green-600 styling, it's perfect for successful verification confirmation, 2FA completion feedback, email verification success, transaction authorization, or any validation success where clear positive feedback confirms completion and prevents further editing.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading OTP State
OTP with verification spinner
Error OTP State
OTP with error message
Disabled OTP State
Non-interactive disabled OTP
Success Alert
Success alert message
Success Toast
Toast notification for success
Two-Factor Auth
2FA verification flow
Questions you might have
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
React Input OTP - Email Verification Flow
A complete React email verification flow with Mail icon, React Hook Form, Zod validation, and resend code functionality built with shadcn/ui InputOTP