A form page

How a long form is organised so it can be filled in without getting lost, with validation next to each field.

A form page asks for data once and well. It is a card with a title, the fields in the order in which people think of them, and the actions at the foot.

When to use it

• Creating or editing one object with more than two or three fields.
• For a single field, or a choice of two, use a dialog or an inline control instead.
• For a long task whose order matters, use a guided flow.

Anatomy

1. Title and the rule for required fields, said once (“Fields marked with * are required”).
2. Fields, one per row, each with its label above, the field, and its help under it.
3. Pairs that belong together (first and last name, from and to) side by side when they fit.
4. Sections with a title each when the form is long; a section is a card or a titled group.
5. Foot: the main action on the right named by what it does (“Create course”); Cancel before it.

Copy

Layout and spacing

Fields take the full width of the column up to 42 rem; a text that is short by nature (a postcode, a number) has the width of its content.

Behaviour

1. Validate when leaving a field and again on sending. While typing, only clear an error that is already shown.
2. On sending with errors, move the focus to the first error and show an alert at the top that lists them, each one linking to its field.
3. The main button is disabled while sending, with a small spinner and the text “Saving…”. It is never disabled before, because a disabled button hides the reason.
4. After saving, go to where the user was (the list, the detail) with a toast that says what was saved; stay in the form only if the next step is more editing.
5. If the user leaves with unsaved changes, ask once, in a dialog with “Discard” and “Keep editing”.

States

Narrow screens

Pairs stack; the foot’s buttons take the full width, the main one first (above). Labels never go to the left of the field.

Accessibility

• Every field has a visible label, tied to it; help and errors are tied with aria-describedby.
• A required field is marked in the label and with required.
• The error is text; the red border is only a support. Never use a placeholder as a label.
• The foot is reachable after the last field in the tab order.

Before shipping

• Every field has a label, help if needed, and an error message written.
• The first error receives the focus.
• The main button says what it does.
• Leaving with changes asks.