OTP Input

Forms

Multi-digit verification input with pixel grouping, labels, and helper messaging.

Installation

npm install input-otp

Import

import { PixelInputOTP, PixelInputOTPGroup, PixelInputOTPSlot, PixelInputOTPSeparator } from "@/components/ui/pixel/pixel-input-otp"

Usage

Type the 6-digit code we sent you

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-input-otp.tsx

"use client";

import { OTPInput, OTPInputContext } from "input-otp";
import * as React from "react";
import { cn } from "@/lib/utils";

type PixelInputOTPProps = React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string;
  hasError?: boolean;
  label?: React.ReactNode;
  helperText?: React.ReactNode;
};

function PixelInputOTP({
  className,
  containerClassName,
  hasError = false,
  label,
  helperText,
  ...props
}: PixelInputOTPProps) {
  const generatedId = React.useId();
  const otpId = props.id ?? `pixel-otp-${generatedId}`;
  return (
    <div className="space-y-2">
      {label ? (
        <label
          className="text-xs font-bold uppercase tracking-wide text-black dark:text-white"
          htmlFor={otpId}
        >
          {label}
        </label>
      ) : null}
      <OTPInput
        id={otpId}
        containerClassName={cn(
          "flex items-center gap-2 has-disabled:opacity-50",
          hasError && "animate-shake",
          containerClassName,
        )}
        className={cn("disabled:cursor-not-allowed", className)}
        {...props}
      />
      {helperText ? (
        <p
          className={cn(
            "text-xs font-mono",
            hasError ? "text-[#ff4d4f]" : "text-black/60 dark:text-white/60",
          )}
        >

// ... (more code below)

Props

PropTypeDefaultDescription
hasErrorbooleanfalseActivates error styling for helper text.
labelReact.ReactNode-Optional label displayed above the slots.
helperTextReact.ReactNode-Helper or validation message below the OTP input.

Examples

6-Digit Code

Type the 6-digit code we sent you

Grouped Slots

Type the 6-digit code we sent you

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.