react-natComponentsOTP Input

OTP Input

Componentv0.1.0

An accessible, responsive, and customizable One-Time Password input for authentication flows, two-factor authentication (2FA), and PIN verification. Features automatic focus management, clipboard paste, backspace handling, and digit masking.

Interactive Playground

Live Preview

Type numbers, paste a code, or use arrow keys

–

Value:(empty)| Complete:false

Length

Mask (PIN mode)

Separator Divider

Error State

Disabled

Action

Installation

Terminal

npm i react-nat-otp

Basic Usage

Import the OtpInput component from react-nat-otp.

VerifyCode.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { OtpInput } from "react-nat-otp";
import { useState } from "react";

export function VerifyCode() {
  const [code, setCode] = useState("");

  const handleComplete = (completedOtp: string) => {
    console.log("Submitting verification code:", completedOtp);
    // Send to your backend API
  };

  return (
    <div className="flex flex-col items-center gap-4">
      <h3 className="text-lg font-semibold">Enter verification code</h3>
      <OtpInput
        length={6}
        separator
        value={code}
        onChange={setCode}
        onComplete={handleComplete}
      />
    </div>
  );
}

Real-world Example: 2FA Card with Resend Countdown

A production-ready verification card pattern with countdown timer and submit button.

Verify your identity

We sent a 6-digit confirmation code to user@example.com

–

Didn't receive code?Resend in 0:45s

Props API Reference

Prop	Type	Default	Description
length	number	6	Total number of input slots (e.g. 4 or 6).
value	string	undefined	Controlled OTP string value.
onChange	(val: string) => void	undefined	Callback triggered whenever any digit is updated.
onComplete	(val: string) => void	undefined	Callback triggered when all digits are completely filled.
mask	boolean	false	Mask characters as dots (password type) for sensitive PINs.
separator	boolean	false	Renders a hyphen separator between the middle digit groups.
hasError	boolean	false	Applies red error state styling and focus rings.
disabled	boolean	false	Disables all inputs and user interaction.
autoFocus	boolean	false	Automatically focuses the first digit input on mount.