How to create OTP Input Component? | Frontend Coding Challege | JavaScript | HTML | CSS | React.js@Devtools Tech
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
, andRight 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.
HTML/CSS/JavaScript
HTML/CSS/JavaScript
React