A flexible and accessible one-time password input component with customizable slots, patterns, and animations.
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp"; export default function DemoOne() { return ( <div className="flex flex-col gap-8 max-w-md mx-auto"> <div className="flex flex-col gap-3 text-center"> <InputOTP maxLength={6}> <InputOTPGroup> <InputOTPSlot index={0} /> <InputOTPSlot index={1} /> <InputOTPSlot index={2} /> </InputOTPGroup> <InputOTPSeparator /> <InputOTPGroup> <InputOTPSlot index={3} /> <InputOTPSlot index={4} /> <InputOTPSlot index={5} /> </InputOTPGroup> </InputOTP> <div className="text-sm text-muted-foreground"> Enter your one-time password. </div> </div> </div> ) }
Part of HextaUI — browse the full library on 21st.dev.