0
Hours
0
Minutes
0
Seconds

How to create OTP Input Component? | Frontend Coding Challege | JavaScript | HTML | CSS | React.js
@Devtools Tech

537

In this coding challenge, you need to create an OTP input field.

Specifications

  • Input field should take exactly 6 numbers.
  • Only numbers should be allowed as valid input.
  • Component should support Backspace, Delete, Shift + Tab, Left Arrow Key, and Right Arrow Key for navigation and operations.
  • Component should support paste functionality if the input is correct (6 numbers).
  • Submit button should only be activate when entered OTP length is equal to 6.
  • Whenever an input is active then it should be highlighted.

Demo

Resources

  • Input Active Color: yellow

Bonus

  • Once you are done with the above mentioned requirements then you can extend the question to add a timer that starts on load with an expiry of 1 minutes. After expiry, all submissions should fail.

To know more about custom timer, checkout --

Submission

Please start the timer before starting and finish your solution within 60 mins. Share your solution with us on Twitter or LinkedIn.