Input Otp
A flexible Accessible one-time password component
Installation
npx shadcn@latest add https://scrollx-ui.vercel.app/registry/input-otp.json 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.