Input Otp

A flexible Accessible one-time password component

Installation

npx shadcn@latest add @scrollxui/input-otp

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from '@/components/ui/input-otp';

<InputOTP maxLength={6} mask={true} maskDelay={1200}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator separatorSymbol='+' />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

API Reference

Input Otp

The InputOTP is a root component that creates an animated OTP input field with masking support and paste functionality.

Props

Property	Type	Default	Description
`maxLength`	number	`required`	Total number of OTP digits. Used in: InputOTP.
`onComplete`	(otp: string) => void	`—`	Callback fired when OTP is fully entered. Used in: InputOTP.
`mask`	boolean	`false`	Whether to mask each digit. Used in: InputOTP.
`maskSymbol`	string	`•`	Symbol to show when masking. Used in: InputOTP.
`maskDelay`	number	`1000`	Delay (ms) before masking input. Used in: InputOTP.
`index`	number	`required`	Slot index position. Used in: InputOTPSlot.
`separatorSymbol`	string	`'-'`	Symbol displayed between OTP slots. Used in: InputOTPSeparator.
`className`	string	`—`	Optional styling class. Used in: InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator.
`containerClassName`	string	`—`	Class name for outer container. Used in: InputOTP.
`inputClassName`	string	`—`	Class name for each OTP input. Used in: InputOTP.
`children`	ReactNode	`optional`	Nested content. Used in: InputOTP, InputOTPGroup.