Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Silent validation failures frustrate users without clear feedback. This React pattern shows InputOTP with animate-shake on error and text-destructive Invalid code message when validation fails—provides immediate visual and text feedback. Built with shadcn/ui InputOTP with Tailwind animate-shake and text-destructive styling, it's perfect for code validation, wrong code feedback, expired token messages, rate limit warnings, or any verification failure where clear error communication guides users toward successful retry.
Hint: Try entering 123456
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading OTP State
OTP with verification spinner
Success OTP State
OTP with success indicator
Form Error State
Form validation with errors
Input with Error
Standard input error state
Error Alert
Destructive alert message
SMS Verification
SMS code verification flow
Questions you might have
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
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