Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input OTP - Two-Factor Authentication
A React two-factor authentication flow with Shield icon, authenticator code input, backup code toggle, and Key icon built with shadcn/ui InputOTP
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Passwords alone aren't enough for account security. This React pattern shows complete 2FA flow with Shield icon, InputOTP for authenticator code, and toggle to backup code Input—comprehensive fallback options. Built with shadcn/ui Form components, React Hook Form, Zod validation, and Lucide React icons, it's perfect for login security, account protection, admin authentication, sensitive operations, or any authentication where second factor drastically reduces unauthorized access risk.
Two-Factor Authentication
Enter the code from your authenticator app
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Email Verification
Email verification with code
SMS Verification
Phone verification with countdown
Loading OTP State
OTP with verification spinner
Error OTP State
OTP with error message
Form Validation
Form validation patterns
Security Dialog
Security confirmation modal
Questions you might have
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
React Input OTP - SMS Verification
A React SMS verification flow with Smartphone icon, countdown timer for resend, and phone number display built with shadcn/ui InputOTP