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.