OTP Input

React OTP Input components are used to collect one-time passwords (OTP) or verification codes. They are commonly used in authentication flows such as login verification, password reset, and two-factor authentication.

This OTP Input component is built with React and styled using Tailwind CSS. It splits the code into multiple-input fields and handles focus, paste, labels, and hints with keyboard interaction.

4-Digit Code

Try typing or pasting a 4-digit number.

6-Digit Verification Code

A divider appears automatically after the first 3 digits.

Controlled Value

Current value: —

Disabled Input

Installation

Usage

Import the component and control the OTP value using state.

import { OtpInput } from "@/registry/core/otp-input";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <OtpInput
      label="Verification Code"
      digitLength={6}
      value={value}
      onChange={e => setValue(e.target.value)}
      hint="Enter the 6-digit code sent to your email."
    />
  );
}

API Reference

OtpInput

Extends input element props (except value).

Prop	Type	Default	Description
`digitLength`	`4 \| 6`	`4`	Number of OTP fields
`label`	`string`	-	Optional field label
`hint`	`string`	-	Helper text shown below the field
`value`	`string`	-	Controlled OTP value (auto-synced to fields)
`disabled`	`boolean`	`false`	Disable all OTP inputs
`className`	`string`	-	Appended to each input element
`onChange`	`React.ChangeEventHandler`	-	Returns concatenated OTP digits as one string

Behavior

Each box only accepts a single numeric digit
Auto-focus moves to the next box as you type
Backspace moves focus to the previous input when empty
Handles paste of full OTP (e.g., pasting "123456")
Automatically pads if value prop is shorter

Accessibility

Each digit is a native <input type="text" />
Label is connected via htmlFor
Focus ring follows system and custom Tailgrids styles
Digits select their content when focused—making replacement easier
Screen readers read the label and each digit individually

Notes

The 6-digit layout includes a visual divider after the 3rd digit
Uses order to ensure correct visual grouping
Works seamlessly in controlled or uncontrolled mode
onChange always provides the full OTP value
Non-numeric keys are prevented except Backspace, Delete, Tab, Meta
Paste only works when the full OTP length matches exactly

CLI

Manual

On this page