Minimal Team Name Onboarding Block for React

Nothing leaves the page. With a valid name, Continue (or Enter) shows a polite status message under the form: saved in this demo, and what Jotwick would create next. To wire it for real, create the workspace on your server where submit says so, keep the button busy until it answers, then go to the next step; if your server refuses the name, show its reason in the line under the field and keep focus there.

A disabled button can't explain itself, and keyboard users can't reach it. Here it stays pressable but quiet: it carries aria-disabled, a muted fill and no shine, and pressing it (or Enter in the field) writes the problem under the input, with an icon, and moves focus to the field. The browser's own validation bubbles are turned off with noValidate, so the message looks the same everywhere. The line holds a hint and the problem in one slot, so nothing moves when it changes.

It shows the answer working: the name, a middle dot and the product name, cut short when it's long, as a real tab would show it. It's a drawing, hidden from assistive technology; the field and its status carry the same information. Change PRODUCT and the tab follows.

The input has autocomplete="organization", which is what browsers look for on an organisation or team name, a real name from the heading through aria-labelledby, and dir="auto" so a name in Arabic or Hebrew reads from its own side. For a personal workspace name, change the value to off.

Here it says skipped in this demo and that the name can be set later in Settings, and clears nothing. In your app give the team a default name (a person's first name plus “'s team”) so a skipped step still leaves something to rename.

The same, in one column: the band is tighter so Continue is on the first screen, and the input text is a size smaller. The page is as tall as the screen (min-h-svh, which doesn't jump when a phone's toolbars hide) and centres its content with a little more room below than above.