Floating Labels Sign In Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent (and whether you asked to stay signed in); Sign out brings the form back with your email still filled in. Keep me signed in only changes that message here. To wire it for real, post the email, the password and the choice to your auth endpoint where the code says so, and let your session lifetime follow the choice.

Each field's placeholder is a single space, so the browser's :placeholder-shown state is true exactly when the field is empty. The cell asks whether it holds an empty field that is neither focused nor autofilled; only then is the label lowered to the middle at full size, and in every other state it rests in its raised place. The label comes after the field in the markup and is tied to it with for, so a screen reader reads it as the field's name, and a field never shows the space as a placeholder.

The label stays raised, so it never sits on top of the filled text: the cell checks the :autofill state as well as the empty one, and the field gets the page's own background in place of the browser's tint. Password managers find the fields as usual: the email is type="email" with autocomplete="username" and the password autocomplete="current-password".

The raised label is 12 pixels in the muted text color and turns to the full text color while its field has focus; both pass AA contrast on the page background in light and dark. It's never smaller than that, which is why the label changes its font size rather than being scaled down.

A disabled button can't explain itself. Here pressing Sign in with an empty or malformed email, or no password, rings the cell at fault, writes one sentence under the group for the first problem, tied to its field, and moves focus there; fixing it shows the next one. The line under the group always holds its height, so nothing shifts, and the page is checked with noValidate so the messages look the same in every browser.

Tab runs through the email, the password, its show and hide toggle, Keep me signed in, Forgot and Sign in; Enter in either field signs in. Focus rings the whole cell. The checkbox is a real labelled control, the heading names the form, and after signing in focus moves to the result's heading while a polite status message says what happened.