Inputs / Input OTP

Input OTP

<InputOTP />Stable

A one-time-code field with per-digit slots. Use for 2FA, SMS verification, email confirmation codes. Built on input-otp library.

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Code

import { InputOTP } from "@/components/upnext";


<InputOTP />

Variants

<InputOTP maxLength={6}>
  <InputOTPGroup>
    {Array.from({length:6}).map((_,i)=> <InputOTPSlot key={i} index={i} />)}
  </InputOTPGroup>
</InputOTP>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.