Split Signup Form Hero Block for React

Each field is a Field with a FieldLabel and its control, inside the form's FieldGroup. Copy one to add a field (a full name or a company, say) and change its label, name, type and autoComplete, or delete one to drop it. The group spaces the fields for you. Keep autoComplete on each field: browsers and password managers use it to fill the form, and to offer a strong password on the password field (new-password). The first screen of a phone is tight, so the more fields you add, the further the button moves down.

The block's signUp handler reads the form's values with FormData, then waits a moment in place of a real call. Replace that wait with your call: set the phase to sending before it, to done when the account is created, and back to idle if it fails, with the error shown under the field it concerns. The form's email and password fields are already named for a server action or an API route.

By the browser. Both fields are required, the email field is type="email", and the password needs at least eight characters (minLength={8}). Submitting with a field missing or wrong stops the form and the browser points to the first problem, in the visitor's language. For messages in your own words, add noValidate to the form, check the values in signUp, and mark the field invalid with a FieldError as the Field docs show.

Every field has a visible label tied to its input, and the password's show/hide button is named Show password or Hide password, after what it does next. While the account is being created, the button shows a spinner and can't be pressed again, and a polite status says the account is being created. When it's done, focus moves to the confirmation, so Check your inbox and the address are read straight away and keyboard users carry on from there.

The form and the confirmation share one grid cell, so the panel is always as tall as the taller of the two. The one not in use is hidden with invisible: it keeps its space but can't be seen, read or focused. Nothing under the hero jumps when the form is sent.

The two columns stack below the lg breakpoint, with the form under the copy. To keep the Create account button on the first screen, a phone drops the ticks, the form's second line and the terms; the headline, the sentence and both fields stay. The email shown in the confirmation breaks anywhere, so a long address never pushes the page sideways down to 320 px.