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.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Login and email verification codes, typed or pasted one character per slot
Numeric PINs and digit only codes that ignore any letter typed into them
Fixed length codes of letters and numbers, split into groups by separators

When not to use

A complete sign-in page with password, social buttons and a brand layout: use the Auth blocks
A mobile number with its country dial code, entered before any code is sent: use the Phone Input component
Open ended text of any length, such as a name, an email address or a password: use the Input component

Agent notes

A wrong code turns red only from aria-invalid on each InputOTPSlot; set on InputOTP it reaches the hidden input and the slots stay plain
Read the code from onChange on InputOTP and check it once it reaches maxLength; no example sends or verifies it

Third-party API docs

input-otp v1: API reference, docs

Markdownhttps://web.dev.reui.io/components/input-otp.md

MCPget_component("input-otp")

Installnpx shadcn@latest add input-otp

Full index for agents:llms.txtReUI MCP setup

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.

6 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 it 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.

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.

Form Blocks in ReUI Pro

The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.

Browse all Application blocks

Frequently Asked Questions

What library does ReUI Input OTP use?

The input-otp library: a lightweight, accessible OTP input built specifically for React. It is the same library used by shadcn/ui's built-in OTP input component. It renders a single DOM input with segmented visual slots.

Does SMS autofill work on iOS and Android?

Yes, when you set autocomplete='one-time-code' on the input element. iOS and Android detect incoming SMS messages containing a numeric code and offer one-tap fill. The input-otp library exposes this attribute through OTPInput props.

How does paste work?

Pasting a multi-character string distributes characters across slots. If you paste '483920' into a 6-slot OTP input, each character fills a slot and focus lands on the last filled slot or moves to the first empty one. Works with clipboard paste on desktop and SMS autofill on mobile.

Can I restrict input to digits only?

Yes. Set inputMode='numeric' and component='[0-9]*' on the OTPInput element. The input-otp library validates keystrokes against the component and rejects non-matching characters. This also triggers the numeric keypad on mobile instead of the full keyboard.

How do I implement auto-submit when all slots are filled?

Pass an onChange handler that fires when the value length equals the maxLength. If the final value passes validation, call your submit function. The verification code component in ReUI shows an onChange handler that checks value.length === 6 and triggers form submission.

What is the difference between OTP and PIN components?

OTP (one-time password) components use autocomplete='one-time-code' for SMS autofill and are temporary: used once and discarded. PIN components are reusable numeric passwords for payment confirmation or app unlock, where SMS autofill is not desired. ReUI has separate components for each use case.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.