Shadcn Input Otp
Browse 6 production-ready shadcn OTP input components built on the input-otp library. Covers basic OTP entry, numeric-only digits, multiple separator styles, alphanumeric codes, PIN inputs, and verification code layouts: accessible, mobile-friendly, and composable with shadcn Field and Button.
Basic OTP input.
OTP input with numeric digits.
OTP input with multiple separators.
OTP input with letters and numbers.
OTP input for PIN codes.
OTP input verification code.
Shadcn Input OTP: Verification Codes and PIN Entry
ReUI Input OTP is built on the input-otp library: the lightweight, accessible OTP input component used by shadcn/ui itself. It renders individual character slots as a single controlled input, handles paste from clipboard, auto-advances focus on digit entry, and announces completion state to screen readers.
Six components cover basic OTP entry, numeric-digit-only validation, multiple separator styles between slot groups, alphanumeric verification codes, PIN code entry, and a complete verification code flow with submit action.
The sections below cover the input-otp library integration, real authentication use cases, features, and how OTP input composes with Field and Button for complete verification forms.
What is Shadcn Input OTP?
Shadcn Input OTP is the official OTP input component in shadcn/ui, built on the input-otp library. It renders a segmented input: each character occupies a styled slot: while the underlying DOM element is a single text input. This gives native mobile keyboard support (numeric keypad on iOS/Android), correct autocomplete='one-time-code' behavior for SMS autofill, and clipboard paste that distributes characters across slots automatically.
ReUI components show Input OTP in realistic authentication and security flows: SMS verification, email confirmation, two-factor authentication, PIN entry for payment confirmation, and alphanumeric license key entry. Each component includes the submit trigger and error state so you can evaluate the complete user flow.
Why Use Shadcn Input OTP?
OTP inputs appear in two-factor authentication, email and phone verification, PIN-gated payment confirmation, and license key entry. The core challenge is building a segmented visual with a single DOM input: maintaining native mobile keyboard behavior, paste support, and accessibility simultaneously. The input-otp library solves this correctly; hand-rolled OTP inputs frequently break SMS autofill or paste.
The autocomplete='one-time-code' attribute enables iOS and Android SMS autofill: the operating system reads the SMS, extracts the code, and fills the input automatically. ReUI OTP components include this attribute and the correct inputmode='numeric' for numeric-only codes.
Libraries and ReUI Input OTP Primitives
ReUI Input OTP imports the input-otp library for the OTPInput and OTPInputSlot primitives. It composes shadcn Field, Label, and Button for complete verification form layouts.
The library is the same one shadcn/ui uses internally for its own OTP input component.
Shadcn Input OTP Features
- ``input-otp`` Library Foundation. Built on the input-otp library — the same library used by shadcn/ui. Single DOM input with segmented visual rendering, native mobile keyboard, SMS autofill via autocomplete='one-time-code', and clipboard paste.
- Auto-Advance and Auto-Submit. Focus moves to the next slot automatically after each character entry. When the last slot fills, an optional onChange callback fires with the complete value — wire to auto-submit or immediate validation.
- Paste Support. Pasting a multi-character string (from SMS autofill, clipboard, or password manager) distributes characters across slots correctly. Works in iOS, Android, and desktop browsers.
- Numeric, Alphanumeric, and PIN Components. Constrain input to digits only (numeric OTP, PIN), letters and digits (license keys, alphanumeric codes), or mixed. Use inputmode='numeric' and component='[0-9]*' for numeric-only mobile keyboards.
- Separator Variants. Separator elements render between slot groups — single dash, double dash, or no separator. Useful for license keys (XXXX-XXXX-XXXX), phone number segments, or date-part inputs.
- SMS Autofill. The autocomplete='one-time-code' attribute enables iOS and Android to intercept incoming SMS codes and offer one-tap fill. Combined with inputmode='numeric' this gives the full native autofill experience.
- Accessible Slot Labeling. Each slot is labeled with its position for screen readers. Completion state is announced via a live region. Focus management follows the natural reading order of the segmented input.
Integrating With Other Components
Always wrap Input OTP in Shadcn Field with a Shadcn Label for the slot group label and an error message slot for invalid code feedback. Use Shadcn Button for the verify action and Shadcn Spinner inside the button during async verification.
Combine with Shadcn Sonner for resend-code confirmation toasts and expired-code error notifications. Use Shadcn Alert for persistent error messages when the code is incorrect or has expired.
Pair with Shadcn Stepper in multi-step authentication flows where OTP verification is one step in a larger identity confirmation sequence.