shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Behavior
OTP with Paste Optimization Input OTP for React
A one-time code field with a Paste Code button that keeps only the digits from the clipboard.
Codes are often copied with spaces or dashes, like 123 456. This example adds a Paste Code button that reads the clipboard, keeps only the digits, takes the first six and fills the field, so a messy copy still works in one press.
Preview
Installation
FAQ
How does the button read the clipboard?
With navigator.clipboard.readText() in the button's press handler. Browsers allow it after a user action, and some ask for permission the first time.
How are the digits extracted?
A regular expression, NON_DIGITS, removes everything that isn't a digit, then the text is cut to six characters and written to the field's value.
What if clipboard access is denied?
The read throws and the handler ignores it. People can still paste into the field with the keyboard or the context menu.
Does a regular paste work too?
Yes. Pasting into the field fills the slots in order. The button helps when the copied text has spaces, dashes or words around the code.
Related
- Controlled OTP Input Input OTPA controlled one-time code field that
- Auto-submit OTP Input OTPA one-time code form that submits on its
- OTP with Enhanced Focus Management Input OTPA one-time code field wrapped in a label
- Copy Button Input GroupA read-only link with a copy button that
- Button with Text (Standard)The one filled action
- OTP with Resend Flow Input OTPA one-time code field with a 60-second