Question 1

What is an input OTP component?

Accepted Answer

The code field on every verification screen: a row of boxes, one character per box, that moves to the next box as you type and fills them all when you paste a code. It's shadcn.io's InputOTP, built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid.

Question 2

Are these input OTP examples free?

Accepted Answer

Yes. Every input OTP example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Why use a code field instead of one text input?

Accepted Answer

The boxes show how long the code is and how much is left, a grouped code like 123-456 is easier to copy by eye, and phones can fill the code from an SMS. Typing, Backspace, the arrow keys and paste all work as people expect.

Question 4

When should I use InputOTP instead of Input?

Accepted Answer

For fixed-length codes: verification codes, two-factor tokens, PINs. Use Input for anything whose length varies, such as passwords and names.

Question 5

How many boxes should a code have?

Accepted Answer

Six is the usual length for SMS and email codes and authenticator apps. Four suits short PINs, and eight suits backup codes. The Different Lengths example shows all three.

Question 6

How do I split the code into groups?

Accepted Answer

Wrap each run of slots in InputOTPGroup and put InputOTPSeparator between groups, for example three and three. The separator is visual only, and the slot indexes count straight through the whole code.

Question 7

How do I submit when the code is complete?

Accepted Answer

Listen for completion on InputOTP and submit from there, as the Auto Submit example does. Show a loading state while you verify, as the Loading State example does, so the page doesn't look stuck.

Question 8

How do I install an input OTP example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the components it uses, InputOTP and, where needed, Field, Button, Alert or Input, to your project.

Question 9

Can phones fill in the code from an SMS?

Accepted Answer

Yes. InputOTP sets `autocomplete` to `one-time-code`, so iOS and Android offer the code from a recent message above the keyboard.

Question 10

How do I accept only digits, or letters too?

Accepted Answer

InputOTP takes a type or a pattern, depending on the library, and rejects other characters as they're typed or pasted. The Numeric Only and Pattern Validation examples show the setting for each library.

Question 11

What do the input OTP examples depend on?

Accepted Answer

The InputOTP component and Tailwind CSS, plus Field, Button, Alert, Input, Spinner and Lucide icons where an example uses them. Values and validation live in the example's own state; there's no form library.

Question 12

Are input OTP examples accessible?

Accepted Answer

Every slot is reachable with the keyboard, and Backspace and the arrow keys move between them. Labeled examples link their FieldLabel to the field, icon buttons have an `aria-label`, and errors and status messages are announced.

Question 13

Can I use these examples with React Server Components?

Accepted Answer

On React, InputOTP is a client component. The static examples, such as the standard and grouped fields, render from a Server Component; the ones with state, such as the forms and flows, are client components.

Input OTP Examples

Auto-submit OTP

OTP with Enhanced Focus Management

OTP with Paste Optimization

OTP with Resend Flow

Controlled OTP Input

OTP in Form with Validation

OTP with Multiple Separators

OTP with Pattern Validation

Standard OTP Input

Disabled OTP Input

OTP with Error State

OTP with Loading State

More component examples

Label

Textarea

Field

Form

Input

Input Group

Item

Kbd

Input OTP examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every input otp example. One prompt away.