Input Otp

A flexible Accessible one-time password component

Installation

npx scrollx-ui@latest add 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.

InputOTP — maxLength, onComplete, className, containerClassName, inputClassName, mask, maskSymbol, maskDelay, children
InputOTPGroup — className, children
InputOTPSlot — index, className
InputOTPSeparator — separatorSymbol, className