Create Account Handle Check Login Block for React

No: it looks the handle up in a typed list of three taken ones and waits a moment, so every visitor sees the same answers and nothing is sent. In a product, ask your server whether the handle is free once the typing has paused, and treat the answer as advice: reserve the handle when the account is created and handle the case where someone else took it in between, since two people can both see it free. Creating the account waits less than a second, then shows what a real product would do next, with a polite message saying nothing was sent.

Four tenths of a second after the typing stops, the check starts and shows a spinner for another four tenths, then the line gives its answer. Every keystroke starts the wait again, and a handle with a wrong shape (too short, too long or with characters other than letters, numbers, dots, dashes and underscores) is named after the pause, without a spinner. The answer is announced once, through a polite status message, not letter by letter.

It still can't get through with a taken name. Sending checks the handle again against the same list, and a taken or badly shaped one is named under the field, with focus on it. The check on screen is only a courtesy to the visitor, never the gate.

They are the typed handle with -4, .k or _writes added, each checked to be valid and free. Pressing one fills the field, starts the check again and returns focus to the field, so a keyboard user can carry on typing. The row keeps its space while there are no tries, so nothing moves when it appears.

The only rule here is eight characters, stated under the field and checked when you send. A strength meter measures guessability, which is a separate and bigger feature; see the self service reset block for it. Whatever you choose, let people paste into the field and keep the show and hide eye.

Below the large breakpoint the columns stack in reading order: the heading and the handle first, then the email, the password and the button, so the field that gives the page its point comes first and the Create account button is still on the first screen of a phone. The divider and its corner marks only exist when there are two columns.