Input OTP

Specialized input fields for entering one-time passwords or multi-digit codes, typically used in authentication flows.

Current Value:

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/InputOTP

import { InputOTP } from "@/components/display-ui/InputOTP"

<OTPInput length={4} disabled={false} autoFocus={false} />

For OTPInput Component

Attribute	Type	Description	Default
length	`number`	Number of OTP input boxes to render.	4
onComplete	`(otp: string) => void`	Callback fired when all OTP digits are filled. Receives the complete OTP string.	-
value	`string`	Controlled value for the OTP input. When provided, the component becomes controlled.	-
autoFocus	`boolean`	Automatically focuses the first empty OTP input on mount.	true
disabled	`boolean`	Disables all OTP input fields.	false
containerClassName	`string`	Additional CSS classes applied to the OTP container.	-
inputClassName	`string`	Additional CSS classes applied to each OTP input field.	-
ariaLabel	`string`	Accessible label describing the OTP input group.	"One-time passcode"

Current Value:

Current Value: