Input OTP

An input component for entering one-time passwords and verification codes.

Basic

Default

<div className="w-full max-w-sm">
  <InputOTP maxLength={6} value="" onChange={() => {}}>
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>
</div>

Variants

4-Digit Code

<div className="w-full max-w-xs">
  <InputOTP maxLength={4}>
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
      <InputOTPSlot index={3} />
    </InputOTPGroup>
  </InputOTP>
</div>

Disabled

<div className="w-full max-w-sm">
  <InputOTP maxLength={6} disabled={true}>
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>
</div>

Usage

Controlled Input

Current value: No code entered

<c />