PinInput

Basic

A verification code input with per-cell auto-advance, paste distribution, backspace navigation, shake-on-error, and pop animation on digit entry.

{/* 6-digit OTP */}<PinInput length={6} onComplete={(pin) => console.log(pin)} />{/* 4-digit masked PIN */}<PinInput length={4} mask />

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add pin-input

pnpm dlx @work-rjkashyap/unified-ui add pin-input

npx @work-rjkashyap/unified-ui add pin-input

bunx @work-rjkashyap/unified-ui add pin-input

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	PinInput,
	Button,
} from "@work-rjkashyap/unified-ui";

Basic Usage

The simplest use case is an uncontrolled 6-cell OTP input. Use onComplete to receive the joined PIN string when all cells are filled.

<PinInput
  length={6}
  onComplete={(pin) => verifyOTP(pin)}
/>

Sizes

<PinInput length={4} size="sm" /><PinInput length={4} size="md" /><PinInput length={4} size="lg" />

Variants

<PinInput length={5} variant="default" /><PinInput length={5} variant="primary" />

Input Types

Control the allowed character set with the type prop.

{/* Digits only — 0-9 */}<PinInput length={6} type="numeric" />{/* Letters and digits */}<PinInput length={6} type="alphanumeric" />{/* Letters only */}<PinInput length={4} type="alphabetic" />

Masked Mode

Set mask to hide entered characters behind a bullet (•), suitable for PIN entry.

<PinInput length={4} mask /><PinInput length={6} mask variant="primary" />

Error State

Setting error={true} applies danger border styling to all cells and triggers a shakeX animation. Each time error transitions from false to true, the shake re-fires.

<PinInput length={6} error />{/* With controlled error after failed verification */}const [cells, setCells] = useState(Array(6).fill(""));const [error, setError] = useState(false);<PinInputlength={6}value={cells}onChange={setCells}error={error}onComplete={async (pin) => {  const valid = await verify(pin);  if (!valid) setError(true);}}/>

Success State

<PinInput length={6} success />

The success state applies a green border to all cells, signaling correct entry.

Controlled

Use value (an array of single characters) and onChange for full programmatic control.

const [cells, setCells] = useState(Array(6).fill(""));

<PinInput
  length={6}
  value={cells}
  onChange={setCells}
  onComplete={(pin) => {
    console.log("Complete PIN:", pin);
  }}
/>;

Auto Focus

Set autoFocus to focus the first cell on mount — useful for modal or inline OTP flows.

<PinInput length={6} autoFocus onComplete={handleVerify} />

Paste Support

Users can paste a code directly into any cell. The component distributes the pasted characters across subsequent cells automatically, respecting the allowed type filter.

{/* Paste "123456" into the first cell and all cells fill instantly */}
<PinInput length={6} type="numeric" onComplete={verifyOTP} />

Complete OTP Flow

A typical OTP verification pattern:

import { useState } from "react";
import { PinInput, Button } from "@work-rjkashyap/unified-ui";

function OTPVerification() {
  const [cells, setCells] = useState(Array(6).fill(""));
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleComplete = async (pin: string) => {
    setLoading(true);
    setError(false);
    try {
      const valid = await verifyOTP(pin);
      if (!valid) {
        setError(true);
        setCells(Array(6).fill(""));
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col items-center gap-4">
      <p className="text-sm text-muted-foreground">
        Enter the 6-digit code sent to your phone.
      </p>
      <PinInput
        length={6}
        value={cells}
        onChange={setCells}
        onComplete={handleComplete}
        error={error}
        autoFocus
      />
      {error && (
        <p className="text-xs text-danger">
          Invalid code. Please try again.
        </p>
      )}
      <Button
        variant="ghost"
        size="sm"
        onClick={() => setCells(Array(6).fill(""))}
      >
        Resend code
      </Button>
    </div>
  );
}

Props

Keyboard Navigation

Motion

• Pop on entry — A subtle pop scale animation plays on the cell background when a digit is entered.
• Shake on error — The entire group plays a shakeX animation each time error transitions to true.
• All animations respect prefers-reduced-motion via useReducedMotion().

Accessibility

• Each cell is an <input> element with aria-label="Digit N of M".
• The first cell includes autoComplete="one-time-code" for SMS autofill on mobile.
• aria-invalid="true" is set on all cells when error is active.
• The container has an aria-label describing the group.
• All keyboard navigation is implemented natively without relying on mouse events.
• inputMode="numeric" is set for numeric type inputs on mobile devices.

Design Tokens