OTP Input Challenge

Problem Description

Create an OTP (One-Time Password) input component that allows users to enter a multi-digit code. This component is commonly used in authentication processes where users need to verify their identity by entering a code sent to their email or phone.

Requirements

• The component should consist of a series of input fields, each representing a single digit of the OTP.
• when a digit is entered, automatically moving focus to the next field as digits are entered.
• when a backspace is pressed, the focus should be moved to the previous field.
• The component should validate input to ensure only numeric characters are accepted.
• When the user completes the OTP entry, a callback function should be triggered to handle the input.
• For testing the callback function, display correct or incorrect message based on the input.

Bonus Features

• Make sure the component is accessible.
• Allow the component to be configured for different OTP lengths (e.g., 4, 6, or 8 digits).
• Provides feedback for incorrect OTP entries, such as changing the border color of the input fields.
• Write unit tests for the component.

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

1. Open your browser's Developer Tools (F12)
2. Check the Console tab while using your app
3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges