Shadcn Input OTP

React OTP input component for 2FA authentication and verification codes. Built with TypeScript and Tailwind CSS for Next.js with smart focus management.

OTP input not working?

Join our Discord community for help from other developers.

Ever tried to type a 6-digit code into separate boxes and wanted to throw your phone? Or watched users give up on 2FA because your OTP input was fighting them every step of the way? Yeah, that's exactly why good OTP inputs matter. This shadcn/ui input brings sanity to authentication flows in your React applications.

Input OTP showcase

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 with smart cursor management and paste support. Styled with Tailwind CSS so it matches your design system instead of looking like separate text boxes glued together.

npx shadcn@latest add input-otp

Why good OTP inputs actually matter for user experience

Here's the thing—authentication is already stressful. Users are trying to log in, reset passwords, or verify their identity. The last thing they need is an OTP input that fights them. Click each box manually? Nope. Paste doesn't work? Frustrating. Mobile keyboard shows letters instead of numbers? Deal-breaker.

Think about how banking apps handle verification codes, or how Stripe processes payment confirmations. Users type one digit, cursor moves automatically. They paste a code, it fills all boxes intelligently. The mobile keyboard shows numbers for numeric codes. It just works, and users focus on what matters instead of battling your interface.

This free shadcn input OTP handles the complex parts—focus management, paste detection, keyboard navigation, accessibility—while you focus on your authentication logic. Whether you're building login systems, payment flows, or security verification in your Next.js applications, OTP inputs that work seamlessly keep users moving through your JavaScript projects.

Common OTP patterns you'll actually use

Simple 4-digit PIN

Basic PIN entry for quick authentication:

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 verification code

The classic SMS code layout with separator:

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 pattern support

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 visual groups

Enhanced readability with separators:

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 validation

Real-time feedback for users:

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

Works seamlessly with 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 }

Features

This free open source OTP input component includes everything you need:

TypeScript-first - Full type safety with OTP state and validation patterns
Smart focus management - Automatic cursor advancement and backspace handling
Paste intelligence - Detects and fills multiple slots from clipboard
Tailwind CSS styled - Customize with utilities, not fighting component CSS
Mobile optimized - Appropriate keyboards for different input patterns
Pattern validation - RegExp support for numbers, letters, or custom formats
Accessibility built-in - Screen readers, keyboard navigation, focus indicators
Form library ready - Works with React Hook Form and validation schemas

API Reference

Core Components

Component	Purpose	Key Props
`InputOTP`	Root container	`maxLength`, `value`, `onChange`, `pattern`, `onComplete`
`InputOTPGroup`	Visual grouping	Groups slots with spacing
`InputOTPSlot`	Individual digit	`index` for position
`InputOTPSeparator`	Visual separator	Divides groups

Common Patterns

Pattern	Use Case	RegExp
Numbers only	SMS codes, PINs	`REGEXP_ONLY_DIGITS`
Mixed format	Backup codes, tokens	`REGEXP_ONLY_DIGITS_AND_CHARS`
Custom	Specific requirements	Your own RegExp pattern

Input Behavior

Action	Result
Type digit	Enters character, moves to next slot
Paste code	Fills all slots automatically
Backspace	Deletes current, moves to previous
Arrow keys	Navigate between slots

Production tips

Choose appropriate patterns. This free shadcn/ui OTP input supports different character patterns—use numbers for SMS codes, mixed alphanumeric for backup codes. This TypeScript component validates patterns automatically, but pick what matches your authentication system in your Next.js applications.

Handle mobile keyboards smartly. The component triggers numeric keyboards for digit-only patterns and full keyboards for mixed formats. This open source shadcn input adapts automatically, but test on real devices to ensure the experience feels natural.

Provide clear instructions. Tell users where to find their code—"Check your text messages" or "Open your authenticator app." This JavaScript component handles the input, you handle the context that helps users succeed in your React applications.

Time out gracefully. OTP codes expire. Show countdown timers, provide resend options, and handle expired codes with clear messaging. The Tailwind CSS styled component shows the input—your authentication flow handles the lifecycle.

Consider accessibility. Screen readers announce each slot and its position. Ensure good color contrast and focus indicators. This component provides the foundation—you ensure all users can complete authentication successfully.

Integration with other components

OTP inputs naturally work with Form components for validation and error handling in your React applications. Use Button components for resend actions and form submission with consistent styling.

For loading states, combine with Spinner patterns during code verification. Alert components work well for showing verification errors or success messages. This open source pattern keeps your authentication flows consistent and professional.

When building multi-step auth, pair OTP inputs with Dialog components for modal verification flows or Card components for structured authentication pages. The input handles code entry—other shadcn components handle the surrounding experience.

For security-focused interfaces, use OTP inputs with Badge components to show security levels or Separator components to organize complex authentication forms. Your JavaScript application can compose these components while maintaining clear user flows.

Shadcn Input OTP

Input OTP showcase

Why good OTP inputs actually matter for user experience

Common OTP patterns you'll actually use

Simple 4-digit PIN

6-digit verification code

Custom pattern support

Multiple visual groups

Controlled with validation

Form integration

Features

API Reference

Core Components

Common Patterns

Input Behavior

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Input OTP

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactinput-otp

Reactbutton

Reactform

Reactinput-otp

When should I use OTP Input vs regular Input?

How do mobile keyboards work with OTP inputs?

How does paste functionality work?

How do I validate OTP codes with forms?

Can I create custom input patterns?

Are OTP inputs accessible to screen readers?

How do I handle code expiration and resend?

Can I customize the appearance?

On this page