Profile Setup Onboarding Block for React

The card reads the same state as the fields: name, role, pronouns and bio are typed into one object and the card is drawn from it, with a stand-in in place of anything still empty. The profile address is the name in lowercase with hyphens between words, so “Linnea Okoro” becomes handleby.example/linnea-okoro. The Joined month is typed, since this page has no account to read it from.

When you leave a field, and for all of them when you press Save profile. A name needs two characters, what you do can't be empty and the bio can't pass 160. The problem shows under its field with an icon, in a line that is always reserved, so nothing moves; Save with a problem puts focus on the first one and says so in the status. Typing in a field with a problem clears it once it's fixed.

The count beside the field is for the eye and hidden from screen readers; while you type, the status speaks it only when it matters: at 20 characters to go, at 10, at none and when you're over. Going over doesn't cut your text: it is a problem to fix, with its amount, when you leave the field.

Uploading, cropping and storing an image is its own step: the avatar upload block does it with a real crop. This one draws the person's initials, which is also what the profile shows until they add a photo.

Nothing leaves the page: a status line under the form says saved in this demo and that nothing was sent. In your app post the values to your server in submit where it says so, show its reasons under the fields it names, and keep the card as the preview of what was accepted. Skip for now says skipped in this demo and keeps what you typed.

The card shrinks to one row, initials, name and role, above the form, and Save profile sticks to the foot of the screen with the status line above it, so the primary action is always in reach while you fill in the fields.