Input OTP Slots Component

Relevant source files

The following files were used as context for generating this wiki page:

• src/react/input-otp-slots.tsx
• src/react/login-form.tsx
• src/react/index.ts
• package.json
• src/types.ts
• src/auth-api.ts

The Input OTP Slots Component is a specialized React UI module designed for handling One-Time Password (OTP) entry within the CellarNode authentication ecosystem. It provides a highly customizable, accessible, and visually interactive interface for users to enter multi-digit verification codes sent via email.

Built as a wrapper around the input-otp library, this component integrates seamlessly with the LoginForm to facilitate the second stage of the authentication flow. It features built-in support for animations (such as shaking on error and caret blinking), slot-based layouts, and automatic form submission upon completion of the code entry.

Sources: src/react/input-otp-slots.tsx:1-5, src/react/login-form.tsx:325-355, package.json:44

Component Architecture

The component is structured into several sub-components that work together to form the complete OTP input interface. It utilizes React Context to share state between the main input handler and individual digit slots.

The diagram above shows the hierarchical relationship between the main container and its constituent parts.

Key Components

Component	Description
InputOTP	The root container that manages the internal logic of the OTPInput and injects global CSS animations.
InputOTPGroup	A layout wrapper used to group individual slots together, often separated by a visual divider.
InputOTPSlot	Represents a single digit field. It displays the character, a fake caret when active, or a placeholder dot when empty.
InputOTPSeparator	A decorative component (typically a horizontal dash) used to separate groups of slots for better readability.

Sources: src/react/input-otp-slots.tsx:55-156

Visual States and Animations

The component uses a dedicated CSS block defined in OTP_STYLES to handle complex visual interactions that are difficult to manage via inline styles alone.

Animation Definitions

• caretBlink: Causes the primary-colored cursor to flash in the active slot.
• fadeInSlot: A subtle scale and opacity transition when a digit is entered.
• otpShake: A horizontal shaking effect triggered when the data-shaking attribute is present, typically used to indicate an invalid code.

Sources: src/react/input-otp-slots.tsx:13-35

Dynamic Styling Logic

The InputOTPSlot component dynamically adjusts its appearance based on the state provided by the OTPInputContext.

Implementation in Login Flow

The InputOTP component is primarily utilized within the LoginForm during the otp step. It is configured to automatically submit the parent form once the maxLength (usually 6) is reached.

Usage Example in LoginForm

<InputOTP
  maxLength={6}
  pattern={REGEXP_ONLY_DIGITS}
  data-invalid={!!error || undefined}
  data-shaking={isShaking || undefined}
  onComplete={() => {
    const form = document.getElementById("otp-form") as HTMLFormElement | null;
    form?.requestSubmit();
  }}
>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Sources: src/react/login-form.tsx:325-355

Data Interaction

While the component itself is purely presentational regarding UI, it facilitates the data flow for the verifyOtp API call.

Interaction Properties

Prop	Type	Description
containerClassName	string	Optional Tailwind classes for the outermost container.
index	number	The specific position (0-indexed) of the slot within the OTP string.
data-invalid	boolean	Attribute that triggers red border styling for the entire group.
data-shaking	boolean	Attribute that triggers the otpShake animation.

Sources: src/react/input-otp-slots.tsx:9-11, src/react/input-otp-slots.tsx:43-52, src/react/input-otp-slots.tsx:94

Summary

The Input OTP Slots Component is a vital part of the CellarNode authentication UI, providing a polished and responsive experience for multi-factor authentication. By modularizing the slots, groups, and separators, it allows for flexible layouts while maintaining consistent behavior and styling across different dashboard portals.