Minimal Single Question Form Block for React

The heading is the visible question, and the form is named by it. The field also has a real label, "Workspace name", hidden with sr-only (not removed), so a screen reader, a voice-control user and a click on the label all still reach the field. The placeholder is an example of an answer, never the label; it disappears when you type, so nothing important lives in it.

Only when you press Enter or Continue, never while you type: nobody is wrong after one letter. The problem appears in the line under the field, which already holds its space, focus goes back to the field and the line is read out because it is the page's polite status. Typing clears it. Change the rule in problemOf and the minimum in MIN.

A page with one question has nothing to scroll, so the heading, the field and the button are all on the first screen on a desktop and on a phone, centred a little above the middle with more room under than over. The button is the only filled control; the link under it is quiet text.

Nothing is created: Continue only shows the answer. In a real app, create the workspace in the submit handler, keep the button pressed while you wait (a busy button keeps its size) and then move on to the next screen; if it fails, say what failed in the same line under the field and keep the name in the box.

With one field you may not need a library, but the wiring is short. With react-hook-form, register the field with Controller, put the rule in a resolver and let handleSubmit run on Enter and on the button; shouldFocusError returns focus to the field. With TanStack Form, give the field an onSubmit validator and show its first error in the line under the field.