FORMS · FORM LAYOUTS

Vertical forms

How fields come together: columns, groups, sections, actions, error summary, unsaved-changes guard and responsive behaviour.
THEME
DENSITY
01

Playground

Width, columns, groups, required marking, actions, state
PREVIEWLive · 3 to fix
New clientFields marked * are required
CompanyWho you work with
ContactThe person who approves work
AddressUsed on invoices
Notes
Visible to your team only
Settings
WIDTH
COLUMNS
GROUPS
REQUIRED MARKING
ACTIONS
STATE
TAB ORDER1. Company *2. Website3. Contact name *4. Email *5. Phone6. Country7. City8. Postcode9. Notes
CODE
<form noValidate onSubmit={submit}> <ErrorSummary errors={errors} /> <fieldset> <legend>Company</legend> <FormGrid columns={2}>…</FormGrid> </fieldset> … <FormActions align="right"> <Button variant="ghost">Cancel</Button> <Button type="submit">Create client</Button> </FormActions></form>
02

Variants

8 layouts
Single columnthe safest default
Two columns for short pairsname · city / postcode · address full width
Section beside its fieldssettings pattern · stacks below 640 px
StudioShown on proposals and your public profile.
TaxPrinted on every invoice. Needed for EU clients.
Card per groupeach group saves on its own
Profile
Contact
Long form with section navanchors · active section highlights
Basics
Scope
Budget
Team
Compact in a modal3 fields · Cancel / Create
Invite teammate
Optional — added to the invite email
Inline, one rowemail + action
Progressive disclosurereveal only when needed
03

States

The whole form, not one field
PRISTINESubmit is enabled. No errors shown yet.
DIRTYUnsaved changes — leaving asks first.
SUBMITTINGFieldset disabled, aria-busy on the button.
ERROR SUMMARYSummary on top, focus moves to it, links jump to fields.
SUCCESSConfirmation in a status region; form resets or redirects.
04

Behavior

Submit validation, unsaved changes, responsive
Validate on submitsummary → links → focus first error
Submit is never disabled. Errors appear after the first attempt, then update as you type.
Unsaved changesguard on leave · Esc
No changes
Responsive columnsdrag the width
≥ 500 px: two columns for the name pair — email and company stay full width
05

In Avava

New project
New projectgrouped · real autocomplete · submit summary
BASICS
BUDGET & DATES
TEAM
A sentence or two — you can write the full brief later
4 required fields left
06

Rules & a11y

Layout rules and structure
Layout rulesthe short version
1One column by default — it’s the fastest to scan and fill
2Two columns only for short pairs — first / last name, city / postcode
3Label above the field — never placeholder-only
4Group with headings — fieldset + legend, 3–6 fields per group
5Primary action last — where the eye ends; Cancel next to it, quieter
6Never disable Submit — validate on submit, show a summary, focus it
Screen readersstructure that’s announced
✓<form noValidate> + your own messagesConsistent errors in every browser
✓<fieldset> + <legend>“Contact, group” is read before its fields
✓Error summary: role="alert", focusableFocus moves to it; each item links to its field
✓aria-invalid + aria-describedbyEvery field points to its own message
✓autocomplete tokensname, email, tel, street-address, postal-code
✓DOM order = visual orderColumns never change the tab order
DO✓Start with one column and earn the second✓Mark the minority: * if most are optional, (optional) if most are required✓Show an error summary on submit and focus it✓Warn before leaving with unsaved changes✓Use real autocomplete tokens
DON’T✕Disable the submit button until the form is valid✕Split unrelated fields into two columns✕Use placeholder text as the label✕Reorder fields on small screens✕Show every error before the first submit