OTP Validation

A composite pattern for a full verification flow, including error handling and a resend timer.

Verification

The whole flow. Checked on the sixth digit: a match pops a success check in a success ring under the slots; a miss shakes the slots, turns every edge warning, clears the digits and pops a warning triangle in a warning ring, holding until the next keystroke. After the first attempt the resend block appears: an outline button over a 56px dial reading 0:30. Clicking it resets the slots, disables the button and fills the dial in primary, which empties over 30 seconds while the digits count down.

Enter 123456, or anything else to see it rejected.