Multi Step Rail Login Block for React

Everything. Any address that looks like an email and any password get through the first two steps, and the code step accepts 482913, which it prints once under the field so keyboard users and tests can pass it. Verifying waits less than a second, then shows "You're signed in" with a polite status message saying nothing was sent. In a product, check each answer with your server as it's given, keep the busy state until it answers, and show its refusal under the field it concerns.

It clears them. Editing the email clears the password and the code, and editing the password clears the code, because a changed answer makes what depended on it stale. Focus moves to the field of the step you opened and a polite message says what was cleared. The rail updates at once: later steps read "Not yet" again, and the Edit buttons exist only on finished steps.

No. It is a list that shows progress, with the current step marked, not a set of tabs, so it never lets someone jump ahead. The only controls in it are the Edit buttons of finished steps, named "Edit email" and "Edit password". Finished steps say "Done" to screen readers before their name, since the marker is only a picture of a number or a check.

It becomes a row of three markers with their names, and the values go to screen readers only. There is no room for Edit there, so the second and third steps show a Back button that goes to the step before and clears what came after, the same as Edit does. From the large breakpoint up the rail is vertical, with values and Edit beside each marker, and the Back buttons are gone.

It is one field of six slots, always read left to right whatever the page direction. Typing a digit moves along the slots, anything that isn't a digit is dropped, and pressing Verify with fewer than six says "Enter all 6 digits" and moves focus back. A wrong code is one sentence under the field, never a shake or a color. It is one input drawn as six slots.