Q: How do I split the OTP into groups (e.g. 3+3 with a separator)?

Use ` ` to wrap each digit cluster, with ` ` between them. Common pattern: ` ` for digits 1-3, separator (renders a dash or dot), ` ` for digits 4-6. Visually clearer than 6 unbroken boxes; users count the digits faster. The separator is purely visual; paste still distributes across all 6 segments transparently.

Question 1

What is a shadcn input OTP?

Accepted Answer

A shadcn input OTP is the segmented digit input you see on every 2FA / verification code screen — six (or four, eight) boxes in a row, one digit per box, auto-advance to the next on type, paste fills all at once. It's built on input-otp by Guillermo Rauch (the React OTP primitive used by Vercel) wrapped in shadcn/ui's InputOTP styling. Each example in this gallery is a single self-contained TSX file.

Question 2

Are these input OTP examples free?

Accepted Answer

Yes, every input OTP example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Why use a segmented OTP input instead of one text field?

Accepted Answer

Three reasons. (1) Visual chunking — a 6-digit code is easier to read as 3+3 segments than as a 6-character string. (2) Mobile UX — segments invite the numeric keypad and discourage autocorrect interference. (3) Paste UX — the OTP primitive intercepts paste events and distributes digits across segments, so users can paste "123 456" or "123-456" or "123456" and it just works. A plain text field requires extra parsing logic for all of these.

Question 4

When should I use OTP versus a regular Input?

Accepted Answer

OTP for fixed-length codes — verification codes, MFA tokens, PIN entry. Regular Input for variable-length strings — passwords, names, free-form text. The visual segmentation of OTP IS the affordance that says "this is a code, not free text". Don't use OTP for credit card fields (use a credit-card-formatted Input instead) or phone numbers (use a tel input with country code separator).

Question 5

What's the right number of segments — 4, 6, or 8?

Accepted Answer

Six is the de facto standard for verification codes (Google, Apple, Stripe — all 6-digit). Four for quick PINs (mobile lock screens, basic confirmations). Eight for higher-entropy backup codes. Above 8 starts to feel like a chore and users mistype more often. The variants gallery shows all three lengths; pick the shortest that gives you enough entropy for your use case.

Question 6

How do I split the OTP into groups (e.g. 3+3 with a separator)?

Accepted Answer

Use `` to wrap each digit cluster, with `` between them. Common pattern: `` for digits 1-3, separator (renders a dash or dot), `` for digits 4-6. Visually clearer than 6 unbroken boxes; users count the digits faster. The separator is purely visual; paste still distributes across all 6 segments transparently.

Question 7

How do I auto-submit when all digits are entered?

Accepted Answer

Listen for `onComplete` on the InputOTP — fires when every segment has a value. From the handler, fire your verification request automatically. UX caveat: pair auto-submit with a visible loading state immediately ("Verifying…") so users don't think nothing happened. On error, clear the digits + focus the first segment so users can retype without a manual reset.

Question 8

How do I install an input OTP example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/input-otp/…`, plus the shadcn/ui InputOTP primitive (and its input-otp dependency) if you don't already have them.

Question 9

How do I make iOS auto-fill the SMS code?

Accepted Answer

Set `autoComplete="one-time-code"` on the underlying input. iOS / Safari will surface the SMS code from the user's recent texts as a suggestion above the keyboard. The InputOTP primitive forwards autoComplete to the inner input. For Android Chrome, additionally include the SMS body's verification token format (e.g. "123456 is your code") and Chrome will offer the same autofill.

Question 10

How do I restrict to numeric-only or alphanumeric input?

Accepted Answer

Pass `pattern={REGEXP_ONLY_DIGITS}` from the input-otp library for numeric-only segments. For alphanumeric, use `REGEXP_ONLY_DIGITS_AND_CHARS`. These regex constants block invalid keystrokes BEFORE they reach the segment, so users can't enter letters into a digit-only OTP. Backspace and arrow keys still work as expected.

Question 11

Which libraries do input OTP examples depend on?

Accepted Answer

input-otp by Guillermo Rauch (the OTP primitive — segment management, paste distribution, focus auto-advance), shadcn/ui InputOTP (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (the dot icon used as separator). React 19 baseline.

Question 12

Are input OTP examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The OTP renders a single hidden input that aggregates all segments — assistive tech treats it as one input. Screen readers announce the field's label and the current value. Keyboard navigation: Backspace clears the last segment + moves focus back; ArrowLeft / ArrowRight moves between segments; typing auto-advances. Paste from clipboard distributes across segments with one Ctrl+V.

Question 13

Can I use these input OTP examples with React Server Components?

Accepted Answer

The InputOTP is a client component (it manages segment state, focus, and paste handling). Wrap it inside a Server Component parent. For verification flows, the form lives in a small client component (the OTP + submit logic) inside an otherwise server-rendered authentication page.

React Input OTP Examples for shadcn/ui

Browse every input otp example

Frequently Asked Questions