Creating an OTP Input Field Component in React

In this tutorial, we will create a simple OTP (One-Time Password) input field component in React. This component will allow users to enter a one-digit code in each input box, and it will automatically move to the next box as the user types. We'll also style the component using CSS.

Prerequisites

Before you begin, make sure you have Node.js and npm (Node Package Manager) installed on your computer.

Step 1: Setting Up the Project

1. Create a new React application using Create React App:

npx create-react-app otp-input-demo
cd otp-input-demo

1. Inside the src folder, create a new directory named components to store our component files.

2. Create a new file named OtpInputField.js inside the components directory. This file will contain our OTP input field component.

Step 2: Building the OTP Input Field Component

Let's build the OtpInputField component that will handle the OTP input logic and UI.

// components/OtpInputField.js
import React, { useRef, useEffect } from "react";
import "./css/OtpInputField.css";

const OtpInputField = () => {
  const otpInputs = useRef([]);

  useEffect(() => {
    otpInputs.current[0].focus();
  }, []);

  const handleInput = (event, index) => {
    // Input handling logic here...
  };

  const handleKeyDown = (event, index) => {
    // Backspace key handling logic here...
  };

  return (
    <div className="otp-container">
      {Array.from({ length: 6 }).map((_, index) => (
        <input
          key={index}
          type="text"
          placeholder="-"
          className="otp-input"
          maxLength="1"
          ref={(input) => (otpInputs.current[index] = input)}
          onInput={(event) => handleInput(event, index)}
          onKeyDown={(event) => handleKeyDown(event, index)}
        />
      ))}
    </div>
  );
};

export default OtpInputField;

Step 3: Styling the OTP Input Field

We'll style our OTP input field using CSS. Create a new file named OtpInputField.css inside the css directory.

/* components/css/OtpInputField.css */
.otp-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.otp-input {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  font-size: 20px;
  outline: none;
  transition: border-color 0.3s;
}

.otp-input::placeholder {
  color: green;
}

.otp-input:focus {
  border-color: blue;
}

Step 4: Integrating the OTP Input Field

Now, let's integrate the OtpInputField component into our main App.js file.

// src/App.js
import React from "react";
import OtpInputField from "./components/OtpInputField";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <OtpInputField />
    </div>
  );
}

export default App;

Step 5: Running the Application

Start the development server and open your browser to see the OTP input field in action:

npm start

Conclusion

In this tutorial, we built a simple OTP input field component in React. The component allows users to enter a one-digit code in each input box, automatically moving to the next box as they type. We also added styling to enhance the user experience. This component can be easily integrated into your projects whenever you need to implement an OTP verification process.

Feel free to explore and modify the component to suit your specific requirements and styling preferences.

---

Congratulations! You've created an OTP input field component in React. You can publish this blog post on your website or blog to share your knowledge with others.