Input OTP

A one-time password input component for React and Next.js. Perfect for 2FA authentication, verification codes, and secure login flows with shadcn/ui styling.

Ever tried to type a 6-digit code into separate boxes and wanted to throw your phone? This OTP input actually works the way users expect - cursor jumps automatically, paste works, no fighting with focus.

2FA verification input

Clean, accessible OTP input with automatic focus handling:

Loading component...

"use client"import * as React from "react"import { OTPInput, OTPInputContext } from "input-otp"import { MinusIcon } from "lucide-react"import { cn } from "@/lib/utils"function InputOTP({  className,  containerClassName,  ...props}: React.ComponentProps<typeof OTPInput> & {  containerClassName?: string}) {  return (    <OTPInput      data-slot="input-otp"      containerClassName={cn(        "flex items-center gap-2 has-disabled:opacity-50",        containerClassName      )}      className={cn("disabled:cursor-not-allowed", className)}      {...props}    />  )}function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="input-otp-group"      className={cn("flex items-center", className)}      {...props}    />  )}function InputOTPSlot({  index,  className,  ...props}: React.ComponentProps<"div"> & {  index: number}) {  const inputOTPContext = React.useContext(OTPInputContext)  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}  return (    <div      data-slot="input-otp-slot"      data-active={isActive}      className={cn(        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",        className      )}      {...props}    >      {char}      {hasFakeCaret && (        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />        </div>      )}    </div>  )}function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {  return (    <div data-slot="input-otp-separator" role="separator" {...props}>      <MinusIcon />    </div>  )}export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

Built on input-otp by @guilherme_rodz, styled with Tailwind, and ready to drop into any Next.js auth flow.

npx shadcn@latest add input-otp

Why good OTP inputs matter

You know those OTP inputs where you have to click each box manually? Yeah, this isn't one of those. Type a digit, cursor moves automatically. Copy-paste a code, it fills in all the boxes. Mobile keyboard shows numbers. It just works.

OTP patterns that users actually like

Simple 4-digit PIN

Simple PIN entry:

Loading component...

"use client"import * as React from "react"import { OTPInput, OTPInputContext } from "input-otp"import { MinusIcon } from "lucide-react"import { cn } from "@/lib/utils"function InputOTP({  className,  containerClassName,  ...props}: React.ComponentProps<typeof OTPInput> & {  containerClassName?: string}) {  return (    <OTPInput      data-slot="input-otp"      containerClassName={cn(        "flex items-center gap-2 has-disabled:opacity-50",        containerClassName      )}      className={cn("disabled:cursor-not-allowed", className)}      {...props}    />  )}function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="input-otp-group"      className={cn("flex items-center", className)}      {...props}    />  )}function InputOTPSlot({  index,  className,  ...props}: React.ComponentProps<"div"> & {  index: number}) {  const inputOTPContext = React.useContext(OTPInputContext)  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}  return (    <div      data-slot="input-otp-slot"      data-active={isActive}      className={cn(        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",        className      )}      {...props}    >      {char}      {hasFakeCaret && (        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />        </div>      )}    </div>  )}function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {  return (    <div data-slot="input-otp-separator" role="separator" {...props}>      <MinusIcon />    </div>  )}export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

6-digit with separator

The classic SMS code layout:

Loading component...

"use client"import * as React from "react"import { OTPInput, OTPInputContext } from "input-otp"import { MinusIcon } from "lucide-react"import { cn } from "@/lib/utils"function InputOTP({  className,  containerClassName,  ...props}: React.ComponentProps<typeof OTPInput> & {  containerClassName?: string}) {  return (    <OTPInput      data-slot="input-otp"      containerClassName={cn(        "flex items-center gap-2 has-disabled:opacity-50",        containerClassName      )}      className={cn("disabled:cursor-not-allowed", className)}      {...props}    />  )}function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="input-otp-group"      className={cn("flex items-center", className)}      {...props}    />  )}function InputOTPSlot({  index,  className,  ...props}: React.ComponentProps<"div"> & {  index: number}) {  const inputOTPContext = React.useContext(OTPInputContext)  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}  return (    <div      data-slot="input-otp-slot"      data-active={isActive}      className={cn(        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",        className      )}      {...props}    >      {char}      {hasFakeCaret && (        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />        </div>      )}    </div>  )}function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {  return (    <div data-slot="input-otp-separator" role="separator" {...props}>      <MinusIcon />    </div>  )}export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

Custom patterns

Letters and numbers for backup codes:

Loading component...

"use client"import * as React from "react"import { OTPInput, OTPInputContext } from "input-otp"import { MinusIcon } from "lucide-react"import { cn } from "@/lib/utils"function InputOTP({  className,  containerClassName,  ...props}: React.ComponentProps<typeof OTPInput> & {  containerClassName?: string}) {  return (    <OTPInput      data-slot="input-otp"      containerClassName={cn(        "flex items-center gap-2 has-disabled:opacity-50",        containerClassName      )}      className={cn("disabled:cursor-not-allowed", className)}      {...props}    />  )}function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="input-otp-group"      className={cn("flex items-center", className)}      {...props}    />  )}function InputOTPSlot({  index,  className,  ...props}: React.ComponentProps<"div"> & {  index: number}) {  const inputOTPContext = React.useContext(OTPInputContext)  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}  return (    <div      data-slot="input-otp-slot"      data-active={isActive}      className={cn(        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",        className      )}      {...props}    >      {char}      {hasFakeCaret && (        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />        </div>      )}    </div>  )}function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {  return (    <div data-slot="input-otp-separator" role="separator" {...props}>      <MinusIcon />    </div>  )}export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

Multiple separators

When you need more visual grouping:

Loading component...

"use client"import * as React from "react"import { OTPInput, OTPInputContext } from "input-otp"import { MinusIcon } from "lucide-react"import { cn } from "@/lib/utils"function InputOTP({  className,  containerClassName,  ...props}: React.ComponentProps<typeof OTPInput> & {  containerClassName?: string}) {  return (    <OTPInput      data-slot="input-otp"      containerClassName={cn(        "flex items-center gap-2 has-disabled:opacity-50",        containerClassName      )}      className={cn("disabled:cursor-not-allowed", className)}      {...props}    />  )}function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="input-otp-group"      className={cn("flex items-center", className)}      {...props}    />  )}function InputOTPSlot({  index,  className,  ...props}: React.ComponentProps<"div"> & {  index: number}) {  const inputOTPContext = React.useContext(OTPInputContext)  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}  return (    <div      data-slot="input-otp-slot"      data-active={isActive}      className={cn(        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",        className      )}      {...props}    >      {char}      {hasFakeCaret && (        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />        </div>      )}    </div>  )}function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {  return (    <div data-slot="input-otp-separator" role="separator" {...props}>      <MinusIcon />    </div>  )}export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

Controlled with feedback

Show users what they're typing:

Loading component...

"use client"import * as React from "react"import { OTPInput, OTPInputContext } from "input-otp"import { MinusIcon } from "lucide-react"import { cn } from "@/lib/utils"function InputOTP({  className,  containerClassName,  ...props}: React.ComponentProps<typeof OTPInput> & {  containerClassName?: string}) {  return (    <OTPInput      data-slot="input-otp"      containerClassName={cn(        "flex items-center gap-2 has-disabled:opacity-50",        containerClassName      )}      className={cn("disabled:cursor-not-allowed", className)}      {...props}    />  )}function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="input-otp-group"      className={cn("flex items-center", className)}      {...props}    />  )}function InputOTPSlot({  index,  className,  ...props}: React.ComponentProps<"div"> & {  index: number}) {  const inputOTPContext = React.useContext(OTPInputContext)  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}  return (    <div      data-slot="input-otp-slot"      data-active={isActive}      className={cn(        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",        className      )}      {...props}    >      {char}      {hasFakeCaret && (        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />        </div>      )}    </div>  )}function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {  return (    <div data-slot="input-otp-separator" role="separator" {...props}>      <MinusIcon />    </div>  )}export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

Form integration

Proper form validation:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Prop	Type	Default	Description
`maxLength`	`number`	`6`	Maximum number of characters
`value`	`string`	-	Controlled input value
`onChange`	`(value: string) => void`	-	Change handler for controlled usage
`onComplete`	`(value: string) => void`	-	Called when all slots are filled
`pattern`	`RegExp`	`REGEXP_ONLY_DIGITS`	Regex pattern for valid characters
`disabled`	`boolean`	`false`	Whether the input is disabled
`autoFocus`	`boolean`	`false`	Auto-focus the first slot on mount
`children`	`React.ReactNode`	-	InputOTPGroup and InputOTPSeparator components

InputOTPGroup

Container for grouping OTP slots together visually.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	InputOTPSlot components

InputOTPSlot

Individual character input slot within the OTP.

Prop	Type	Default	Description
`index`	`number`	-	Position index in the OTP sequence
`className`	`string`	-	Additional CSS classes

InputOTPSeparator

Visual separator between groups of OTP slots.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Common Patterns

Pattern	RegExp	Use Case
Numbers only	`REGEXP_ONLY_DIGITS`	SMS codes, PIN numbers
Numbers + Letters	`REGEXP_ONLY_DIGITS_AND_CHARS`	Backup codes, complex tokens
Custom	Your own RegExp	Specific format requirements

Keyboard Interactions

Key	Action
`0-9`, `A-Z`	Enter character (if pattern allows)
`Backspace`	Delete current character, move to previous
`Delete`	Clear current character
`Arrow Left/Right`	Navigate between slots
`Tab`	Move to next focusable element
`Shift + Tab`	Move to previous focusable element
`Ctrl/Cmd + V`	Paste and auto-fill slots

Accessibility Features

Feature	Implementation
Screen Readers	Each slot is announced with position
Focus Management	Clear focus indicators and logical tab order
ARIA Labels	Proper labeling for assistive technology
High Contrast	Respects system color preferences
Keyboard Navigation	Full keyboard control without mouse
Error States	Screen readers announce validation errors

Common patterns

Two-factor authentication - TOTP codes from authenticator apps or SMS verification.

Password reset - Email verification codes in your reset flow.

Payment verification - Extra security for transactions.

Account confirmation - Verify email addresses during signup.

Make OTP forms that work

Auto-advance focus - Don't make users click each box
Allow paste - Let them paste the whole code at once
Mobile keyboards - Number pad for digits, full keyboard for mixed codes
Clear errors - "Code expired" beats "Invalid code"
Resend options - Always include "didn't get it?"
Good instructions - Tell them where to find the code

2FA verification input

Why good OTP inputs matter

OTP patterns that users actually like

Simple 4-digit PIN

6-digit with separator

Custom patterns

Multiple separators

Controlled with feedback

Form integration

Built for Next.js auth flows

API Reference

InputOTP

InputOTPGroup

InputOTPSlot

InputOTPSeparator

Common Patterns

Keyboard Interactions

Accessibility Features

Common patterns

Make OTP forms that work

On this page

Input OTP

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactbutton

Reactform

Reactinput-otp

On this page