iRuemu Coding Blog
Creating an OTP Input Field with Dash Icons in React

Creating an OTP Input Field with Dash Icons in React

Ogunuyo Ogheneruemu B's photo
Ogunuyo Ogheneruemu B
·

3 min read

In this tutorial, we'll guide you through the process of creating an OTP (One-Time Password) input field with dash icons using React. Icons are an effective way to enhance the user experience and guide users through your application's interface. We'll use the react-icons library to integrate dash icons into our OTP input field.

Step 1: Setting Up the Project

To get started, ensure you have Node.js and npm (Node Package Manager) installed on your machine. If you don't have React set up yet, you can create a new project using the following command:

npx create-react-app otp-input-field

Navigate to the project folder:

cd otp-input-field

Step 2: Styling the OTP Input Field

Open the OtpInputField.css file and define the styles for the OTP input field and its container. We'll use flexbox to center the input fields and icons within the container:

/* OtpInputField.css */

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

/* ... other styles ... */

Step 3: Managing User Input

In the OtpInputField.js file, import the necessary dependencies:

import React, { useRef, useEffect, useState } from "react";
import { FaMinus } from "react-icons/fa";
import "./css/OtpInputField.css";

We'll use the useRef and useState hooks. The otpInputs ref will store references to our input fields, and the inputValues state will keep track of the user's input:

const otpInputs = useRef([]);
const [inputValues, setInputValues] = useState(["", "", "", ""]);

Step 4: Integrating Dash Icons

Now, let's integrate the dash icons as placeholders within the input fields. Map over the input fields and conditionally render the dash icon using the inputValues state:

return (
  <div className="otp-container">
    {Array.from({ length: 4 }).map((_, index) => (
      <div key={index} className="otp-input-container">
        <div
          className={`dash-icon ${inputValues[index] !== "" ? "hidden" : ""}`}
        >
          <FaMinus size={20} color="black" />
        </div>
        <input
          type="text"
          placeholder=""
          className="otp-input"
          maxLength="1"
          ref={(input) => (otpInputs.current[index] = input)}
          value={inputValues[index]}
          onInput={(event) => handleInput(event, index)}
          onKeyDown={(event) => handleKeyDown(event, index)}
        />
      </div>
    ))}
  </div>
);

Step 5: Ensuring Accessibility

To ensure accessibility, we're using a visually hidden class to handle the dash icon's opacity:

.dash-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}

.hidden {
  opacity: 0;
}

This way, when the user inputs a character, the dash icon will become transparent, providing a seamless user experience.

By following these steps, you'll have successfully created an OTP input field with dash icons using React. Icons are an essential component of web design, enhancing both usability and aesthetics. Through the react-icons library, you can easily integrate a variety of icons to improve your application's visual appeal and user engagement.

Remember, icons should align with your application's purpose and cater to your target audience. Thoughtful icon integration can transform your web design into a user-centric experience that is not only visually appealing but also intuitive and accessible.

ReactInputOTPreact-icon