Shadcn Input OTP: One Time Password Field for React
The shadcn input OTP renders the familiar row of single character boxes used for verification codes, two factor authentication, and email confirmation. As an otp input for React it handles focus movement, paste, and selection for you, while Tailwind CSS keeps the boxes visually in step with the rest of your form.
On this page you get a copy-paste OTP field example ready for Next.js and TypeScript, with grouped slots and a separator. The same base extends cleanly to 4 or 8 digit codes, alphanumeric patterns, and auto-submit flows once the last slot fills.
What is the Shadcn Input OTP component?
Visually the component shows individual slots, but behind them sits one real input element, which is the trick that makes it robust. Typing advances through the boxes, backspace walks backward, arrow keys move the caret, and pasting a full code from an authenticator app or SMS fills every slot at once.
The shadcn input-otp docs describe the slot and group anatomy used here, so restructuring the layout, say three digits, a separator, then three more, is plain JSX.
Why use this OTP input?
- Paste just works: Users can paste an entire code from their messages and every slot populates correctly, the single most common OTP frustration solved.
- One input, many boxes: Because a single hidden input drives the UI, autofill, form submission, and mobile keyboards behave like a normal text field.
- SMS autofill friendly: With the one-time-code autocomplete hint, iOS and Android can suggest the incoming SMS code above the keyboard.
- Pattern control: Restrict entry to digits or allow alphanumeric codes with a regex pattern, enforced while typing rather than at submit.
- Composable layout: Slots, groups, and separators are components, so a 6 digit code split three and three takes seconds to arrange.
Production tips
- Auto-submit on completion: When the last slot fills, validate and submit automatically. Making users find a confirm button after typing 6 digits adds pure friction.
- Use the numeric keyboard: For digit codes, set the input mode to numeric so mobile users get the right keys immediately.
- Plan the failure path: On a wrong code, clear the slots, refocus the first one, and show a clear error with a resend option and cooldown timer.
- Keep codes short-lived: Communicate expiry near the field, for example code expires in 10 minutes, so users understand why a stale code fails.
Works well with other components
Verification flows compose the OTP field with a button for manual submission and resend, a field wrapper for the label and error message, and often a dialog or card that frames the whole step. A sonner toast works well for confirming that a new code was sent.
The auth screens bundled with our Next.js dashboards include a complete two factor step built from exactly these pieces.
Under the hood
The component is powered by input-otp, a small React library that renders one invisible input and mirrors its value into styled slots. That architecture is what keeps copy and paste, selection, and screen reader behavior identical to a native field.
Since the library is headless and the slot styling is Tailwind CSS, the field integrates cleanly whether the surrounding form uses Radix UI or Base UI components.