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.

Installation

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add otp-input

Usage

Import the component and control the OTP value using state.

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

export default OtpInputPreview = () => {
  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."
    />
  );
};

Examples

Default

Start with a standard 4-digit code entry by using the default digitLength configuration.

4-Digit Code

Try typing or pasting a 4-digit number.

Six Digit Code

Accommodate longer verification codes by setting the digitLength prop to 6.

6-Digit Verification Code

A divider appears automatically after the first 3 digits.

Controlled

Pass value and onChange to control the OTP input from state.

Controlled Value

Current value: —

Disabled

Prevent all user interactions and focus state transitions by setting the disabled prop to true.

Disabled Input

Custom

Use className to customize the input appearance.

Secure Login

Enter the code sent to your device

Note: The custom example demonstrates how you can override styles and structure for specific use cases like a secure login form.

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

OTP Input

CLI

Manual

Secure Login

On this page