OTP Input Field Using ReactJS

Building A OTP Input Field Using ReactJS


In this tutorial, we’ll walk you through the process of creating how to build OTP Input Field using reactjs from scratch. In the age of technological advancements, a frequent situation is encountering the one-time password (OTP) input component in our daily use apps and web apps, ensuring secure authentication. ReactJS is a JavaScript Framework just like Angular and VueJS Frameworks but instead, it is a more popular one. Let’s make this super simple and fun!

Preview of OTP Input

OTP input Filed using reactjs


  • Basic Knowledge of HTML
  • Basic Knowledge of CSS
  • Basic Knowledge of JS including ReactJS Concepts.

50+ Interesting React JS Project ideas With Source Code from Beginner and Intermediate-level

How to Set up the ReactJS Project

Before we can start building our Input Field, we need to set up our environment. We’ll use create-react-app .

To create a new application, open your terminal or command prompt and type:

npx create-react-app OTPInput

This command will create a new folder named `OTPInput`  with all the necessary files and dependencies for our React application.

The React template is finally set up and we are ready to build the clone!

Steps To Create OTP Input Field

Absolutely! Before we jump in, let’s take a moment to understand the easy steps we’re about to follow.

We’ll be Creating the Input field in two simple steps.

Folder Structure

OTP Input Field Using ReactJS


import React, { Component } from "react";
import ReactDOM from "react-dom";
import OtpInput from "react-otp-input";
// import OTPInput, { ResendOTP } from "otp-input-react";
// import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
// import "./styles.css";

const useStyles = makeStyles(theme => ({
  grid: {
    backgroundColor: "grey",
    height: "50vh",
    textAlign: "center"
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main
  submit: {
    margin: theme.spacing(3, 0, 2)
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"

export default function App() {
  const classes = useStyles();
  const theme = useTheme();
  return (
    <Container component="main" maxWidth="sm">
      <CssBaseline />
      <div className={classes.paper}>
          style={{ backgroundColor: "white" }}
          <Grid item container justify="center">
            <Grid item container alignItems="center" direction="column">
              <Grid item>
                <Avatar className={classes.avatar}>
                  <LockOutlinedIcon />
              <Grid item>
                <Typography component="h1" variant="h5">
                  Verification Code
          <Grid item xs={12} textAlign="center">
            <Paper elevation={0}>
              <Typography variant="h6">
                Please enter the verification code sent to your mobile
            <Grid item spacing={3} justify="center">
                  width: "3rem",
                  height: "3rem",
                  margin: "0 1rem",
                  fontSize: "2rem",
                  borderRadius: 4,
                  border: "1px solid rgba(0,0,0,0.3)"
            <Grid item>

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);



  "name": "react-otp-input-demo",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "@material-ui/core": "4.10.0",
    "@material-ui/icons": "4.9.1",
    "@material-ui/styles": "4.10.0",
    "otp-input-react": "0.2.4",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-otp-input": "0.3.1",
    "react-scripts": "2.0.3"
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  "browserslist": [
    "not dead",
    "not ie <= 11",
    "not op_mini all"

Final Output of Project

OTP Input Field Using ReactJS

Number Guessing Game using JavaScript


Congratulations, You have completed your Major Reactjs Project and further you can enhance this as per your preferences. You can deploy it on the Github, Vercel, or Netfliy platforms and make it live for your friends. Add this to your resume after adding or enhancing more functionality. You can add further functionalities to your websites.

Thanks for reading this article, We will be posting a lot more articles from intermediate to advanced topics in this coming year and we will be unboxing the mystery of web and software engineering in general, from the Backend to the Frontend.

I hope you liked this Tutorial and must have learned Something new. If you have any questions regarding this feel free to drop your comments below and contact our team on Instagram @Codewithrandom.

Happy Coding!!!

Leave a Reply