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

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-