OtpInputField

OtpInputField is a customizable React component for capturing OTP (One-Time Password) inputs. It supports various features like masking, handling paste events, and more. Fully typescript supported component build with react 19.

Installation

Install the package via npm or yarn:

npm install otp-input-field
yarn add otp-input-field

import React from 'react';
import OtpInputField from 'react-otp-input-field';
import 'react-otp-input-field/dist/index.css'

const App = () => {
  const handleComplete = (otp) => {
    console.log('OTP:', otp);
  };

  return (
    <div>
      <OtpInputField length={6} onComplete={handleComplete} />
    </div>
  );
};

export default App;

Example

<OtpInputField
  length={6}
  onComplete={(otp) => console.log('OTP:', otp)}
  masking={true}
  containerClassName="my-container-class"
  inputFieldClassName="my-input-field-class"
/>

| Prop Name | Type | Description | | ------------------- | -------------------------------- | --------------------------------------------- | | length | number (optional) | Length of the OTP (default: 6) | | onComplete | (otp: string) => void (optional) | Callback function to handle the completed OTP | | masking | boolean (optional) Whether to | mask the OTP input (default: false) | | containerClassName | string (optional) Additional | CSS classes for the container | | inputFieldClassName | string (optional) Additional | CSS classes for the input fields |

Features

Customizable Length: Set the length of the OTP as per your requirement.

Masking: Optionally mask the OTP input for added security.

Paste Handling: Paste an OTP directly into the input fields.

Styling: Add custom CSS classes to style the container and input fields.

TailwindCSS

This component leverages TailwindCSS for styling. TailwindCSS is a utility-first CSS framework that provides a set of low-level utility classes to build any design. Customize the look and feel using your own TailwindCSS classes.

TypeScript

This component is built with TypeScript, ensuring type safety and improved development experience.

🤝 Contributing Contributions are welcome! Please fork this repository and submit a pull request.