Input OTP

Stable

Accessible one-time password component with copy-paste functionality.

Examples

Basic Usage

tsx
<InputOTP maxLength={6} label="Verification Code">
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Neon Variant

tsx
<InputOTP variant="neon" maxLength={4} label="Access Pin">
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

States

tsx
<div className="flex flex-col gap-6">
  <InputOTP error="Invalid code." maxLength={3}>...</InputOTP>
  <InputOTP success maxLength={3}>...</InputOTP>
</div>

API Reference

PropertyDescriptionTypeDefault
variantVisual style propagated to slots."default" | "neon" | "glass"-
maxLengthMaximum number of characters.number-
labelForm field label.string-
errorError state and message.string | boolean-
successSuccess state styling.boolean-