Input OTP

Stable

High-security segmented one-time passcode slots featuring glowing caret pulses, instant clipboard pasting, and cryptographic validation styling.

Installation

$pnpm add @siberui/react

Import

tsx
import { 
  InputOTP, 
  InputOTPGroup, 
  InputOTPSlot, 
  InputOTPSeparator 
} from '@siberui/react';

Basic Usage & Split Groups

Split OTP slots across two discrete 3-digit groups using InputOTPSeparator for optimal numerical readability.

tsx
<InputOTP maxLength={6} label="AUTHENTICATION CODE (6-DIGIT)">
  <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 Monospace PIN Mode

Activate variant="neon" to illuminate focused character slots with cybernetic cyan laser borders and glowing backgrounds.

Enter the 4-digit token generated on your physical security key

tsx
<InputOTP
  variant="neon"
  maxLength={4}
  label="QUANTUM ACCESS PIN (4-DIGIT)"
  helperText="Enter the 4-digit token generated on your physical security key"
>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

Validation States (Error & Success)

Pass error or success to visually color slot perimeters and display alert messages.

8
9
2
7
4
1

Biometric session authorized

tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-2xl">
  <InputOTP
    error="INVALID_TOKEN: Checksum verification failed"
    value="892"
    maxLength={3}
    label="FAILED PASSCODE"
  >
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
    </InputOTPGroup>
  </InputOTP>

  <InputOTP
    success
    value="741"
    maxLength={3}
    label="VERIFIED PASSCODE"
    helperText="Biometric session authorized"
  >
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
    </InputOTPGroup>
  </InputOTP>
</div>

Frosted Cyber-Glass 2FA Gateway

Construct glassmorphic secondary authentication dialogs with circuit textures and active border sweeps.

HARDWARE 2FA CHALLENGE
00:45

Enter the 6-digit TOTP challenge from your hardware authenticator app.

tsx
<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-6">
    <div className="flex items-center justify-between pb-4 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <KeyRound className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">HARDWARE 2FA CHALLENGE</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">00:45</Badge>
    </div>

    <div className="flex flex-col items-center gap-5">
      <p className="text-xs text-slate-300 text-center">
        Enter the 6-digit TOTP challenge from your hardware authenticator app.
      </p>

      <InputOTP
        variant="neon"
        maxLength={6}
        value={value}
        onChange={setValue}
      >
        <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>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        AUTHORIZE ACCESS
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Vault Decryption Console

Composite cipher entry console embedded into orbital defense telemetry systems.

AIR-GAPPED VAULT KEYPAD

LOCKED

Biometric multi-sig verification required for core purge.

tsx
<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">AIR-GAPPED VAULT KEYPAD</CardTitle>
      <Badge variant="neon" size="sm">LOCKED</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Biometric multi-sig verification required for core purge.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-6 flex flex-col items-center">
    <InputOTP variant="neon" 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="flex w-full justify-between gap-3">
      <Button variant="secondary" size="sm" className="w-1/2">CANCEL</Button>
      <Button variant="neon" size="sm" glow className="w-1/2">UNLOCK VAULT</Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (8)← swipe to inspect →
PropertyDescriptionTypeDefault
variant
Visual styling and laser glow theme passed down to slots.
"default" | "neon" | "glass"
"default"
maxLength
Total number of character slots (required).
number
-
label
Top monospace label linked for assistive technologies.
string
-
helperText
Instructional text beneath the OTP group.
string
-
error
Displays a danger state perimeter and error message.
string | boolean
-
success
Applies emerald verified styling to all slots.
boolean
false
value
Controlled string value.
string
-
onChange
Callback fired whenever the input characters update.
(value: string) => void
-

Accessibility

  • input-otp Core: Built atop the industry-standard input-otp library with full support for SMS autofill on mobile devices.
  • Clipboard Pasting: Users can copy a 6-digit token and paste anywhere over the OTP slots to populate all fields in one keystroke.
  • Animated Caret: Blinking monospace carets clearly indicate the currently active slot.

Best Practices

  • Separator Usage: When codes exceed 4 digits (e.g. 6 or 8 digits), always insert <InputOTPSeparator /> to reduce cognitive load.
  • Auto-Submit: When the final digit is entered (value.length === maxLength), consider triggering verification automatically.