Docs
Input OTP

Input OTP

Accessible one-time password component with copy paste functionality.

About

The Input OTP component serves as a foundational element for form interactions, offering a flexible and intuitive method for capturing user input specifically for one-time passwords (OTPs).

Installation

Run the following command:

yarn add @camped-ui/input-otp

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "caret-blink": {
          "0%,70%,100%": { opacity: "1" },
          "20%,50%": { opacity: "0" },
        },
      },
      animation: {
        "caret-blink": "caret-blink 1.25s ease-out infinite",
      },
    },
  },
}

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@camped-ui/input-otp"
<InputOTP
  maxLength={6}
  render={({ slots }) => (
    <>
      <InputOTPGroup>
        {slots.slice(0, 3).map((slot, index) => (
          <InputOTPSlot key={index} {...slot} />
        ))}{" "}
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        {slots.slice(3).map((slot, index) => (
          <InputOTPSlot key={index} {...slot} />
        ))}
      </InputOTPGroup>
    </>
  )}
/>

Examples

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

Separator

You can use the <InputOTPSeparator /> component to add a separator between the input groups.

Controlled

You can use the value and onChange props to control the input value.

Enter your one-time password.

Toggle

Form

Please enter the one-time password sent to your phone.