Input OTP

When To Use

Use the Input OTP component when you need to:

Implement one-time password or verification code inputs
Create user-friendly authentication flows
Handle multi-factor authentication
Build secure verification processes
Collect numeric codes sent via SMS, email, or authenticator apps
Implement PIN entry interfaces

The Input OTP component provides a specialized interface for entering authentication codes with a focus on usability and accessibility.

Verification Code

Enter the 6-digit code sent to your device

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Numeric#

PIN Entry

Enter your 4-digit PIN code

4 digits remaining

Pattern#

Product Key

Enter your product activation key

Separated#

Authentication Code

Enter the code from your authenticator app

Format: XXX-XXX

Props

InputOTP

Prop	Type	Default
`render?`	`InputOTPRenderFn`	-
`noScriptCSSFallback?`	`string \| null`	-
`containerClassName?`	`string`	-
`pasteTransformer?`	`((pasted: string) => string)`	-
`pushPasswordManagerStrategy?`	`"increase-width" \| "none"`	-
`onComplete?`	`((...args: any[]) => unknown)`	-
`textAlign?`	`"left" \| "center" \| "right"`	-

InputOTPSlot

Prop	Type	Default
`hasFakeCaret`	`boolean`	-
`placeholderChar`	`string \| null`	-
`char`	`string \| null`	-
`isActive`	`boolean`	-