Build a verification code input

Loading problem workspace…

Build a verification code input · UIHero

Build a verification code input

Create an accessible segmented code input with digit filtering, paste, and predictable focus movement.

MediumReact Forms

45 min0% acceptance

Description

Build a six-digit VerificationCodeInput. Typing advances focus, Backspace navigates intuitively, pasted digits distribute across fields, non-digits are ignored, and completion fires exactly once for each newly completed code.

Requirements

The solution exports the required VerificationCodeInput API from the editable module.
Digit filtering works deterministically for the documented normal, boundary, and repeated-use scenarios.
Auto advance works deterministically for the documented normal, boundary, and repeated-use scenarios.
Backspace navigation works deterministically for the documented normal, boundary, and repeated-use scenarios.
Paste distribution works deterministically for the documented normal, boundary, and repeated-use scenarios.
Completion once works deterministically for the documented normal, boundary, and repeated-use scenarios.
Accessible labels works deterministically for the documented normal, boundary, and repeated-use scenarios.

Paste a complete code

Input

Paste 12a34-56 into the first field

Expected output

The fields contain 1, 2, 3, 4, 5, 6 and completion fires once

Explanation

Formatting characters and letters are ignored before digits are distributed.

Constraints

Default to six digits while supporting another positive length
Expose a unique accessible label for every position
Do not accept non-digit characters

Hints

Hint 1

Keep the canonical code as a fixed-length array of characters.

Hint 2

Centralize focus movement so typing, Backspace, and paste share the same boundary rules.

Hint 3

Track the last completed value to avoid duplicate completion callbacks on rerender.

Reactformsfocus management

Loading problem workspace…