Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input OTP - OTP with Paste Optimization
A React OTP input with dedicated paste button using Clipboard API to read and filter pasted codes built with shadcn/ui InputOTP and Button
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users copy OTP codes from SMS but struggle pasting into individual slots—manual typing wastes time. This React Button with ClipboardPaste icon reads navigator.clipboard, strips non-digits with regex, slices to 6 characters, and sets InputOTP value—one-click paste flow. Built with shadcn/ui InputOTP, Button, Lucide React icons, and Clipboard API, it's perfect for SMS verification codes, email authentication, authenticator app codes, or any OTP flow where users receive codes externally and explicit paste button improves success rate over native paste behavior.
Paste automatically filters to digits only.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Controlled OTP Input
OTP with state management
Auto-submit OTP
OTP with automatic submission
OTP with Enhanced Focus
OTP with click-to-focus
Input with Copy Button
Copy button pattern
Standard Button
Basic button component
OTP with Resend Flow
OTP with countdown timer
Questions you might have
React Input OTP - OTP with Enhanced Focus Management
A React OTP input with enhanced focus management allowing clicks anywhere on the container to focus the input using shadcn/ui InputOTP with useRef
React Input OTP - OTP with Resend Flow
A React OTP input with countdown timer and resend button preventing spam while allowing code re-requests built with shadcn/ui InputOTP and Button