Track your progress, run tests, and get AI feedback
Run code and see test results
Submit and get AI-powered feedback
Track which problems you've solved
Build a Flexible React OTP Input Component with Accessibility
Many modern applications use One-Time Passcodes (OTPs) for secure authentication. This challenge requires you to build a robust and accessible OTPInput component for a fictional digital wallet app, 'VaultPay'. The goal is to create a seamless user experience for entering multi-digit passcodes, focusing on input handling, focus management, and accessibility best practices.
Your primary task is to create a reusable OTPInput component in React that meets the following requirements:
length (number of digits), value (current OTP string), onChange (callback for value changes), and disabled props.length individual input fields for each digit.Backspace.Backspace should clear the current box and move focus to the previous box if not already at the first.aria-label attributes to convey their purpose (e.g., "OTP digit 1 of 6").OTPInput component renders length distinct input fields.Backspace in an input field clears its value and moves focus to the previous field.length limit.onChange callback is invoked with the complete OTP string whenever the value changes.disabled prop, making all input fields uneditable.aria-label for screen reader users.length digits of the pasted string should be used to populate the fields.Constraints
clsx for conditional classes, but not required).OTPInput component functions as specified.OTPInput component (e.g., clear props, proper state management).