Layouts · Task flow

Single Page Form

Also called: Form page, Create page, Edit page, Single-step form

Puts every field to fill in on one page, in a single column from top to bottom, and users submit everything at once with the button at the bottom. It's the most common page for creating and editing data.

Grayscale wireframe, structure only

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

This is the "New customer" page. Please use a single page form layout: one column, max width 640px, with labels above the inputs. Split the fields into two groups, "Basic info" and "Contact info", each with a small heading. Mark required fields with an asterisk, validate on blur and show error messages below the field. At the bottom, put "Cancel" and a primary "Save" button. While submitting, show a loading state on the button and prevent double submits.

Send to

Component library

01Decide

Does your content look like this?

Check both columns to confirm Single Page Form is what you need.

Use Single Page Form when

Creating or editing a record with twenty or fewer fields
The fields don't depend on each other and can all be shown at once
Users fill everything in and submit it once

Pick something else when

The task has clear steps in order, or there are so many fields that they span several screens
Use insteadWizard
There are many unrelated options and users often change just one of them
Use insteadSettings Page
The data is only for viewing and doesn't need editing
Use insteadDescription List

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

01
Fields laid out in three or four columns, so the eye jumps back and forth and fields get missed
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
02
Dozens of fields with no grouping, with input boxes laid out in one long run
03
All error messages pop up at the top of the page, so you can't tell which field has the problem

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A page title at the top, single-column fields in groups in the middle (label on top, control below), and submit and cancel buttons at the bottom.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A single page form is the familiar "New order", "Edit profile" or "Send feedback" page. Under the title is a set of fields, each made up of a label and an input control (text input, dropdown, date, upload and so on), in one column from top to bottom. At the bottom are "Save" and "Cancel" buttons.

A single column with labels above the inputs is the recommended setup. The eye only moves from top to bottom, which is the fastest to fill in and makes it hard to miss anything. When there are many fields, group them by topic, like "Basic info", "Contact info" and "Attachments", and give each group a small heading. Mark required fields with an asterisk, and show error messages right below the field they belong to.

The difference from a Wizard: all fields are visible at once with no steps, which suits cases with not too many fields (roughly twenty or fewer) that don't depend on each other. The difference from a Settings Page: a single page form is filled in and submitted once, while a settings page has many unrelated options and each one is usually saved as soon as you change it.

Developer infoTerm ID, DOM cues, match priority

Term ID: layout-single-form
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v2 · updated Sep 29, 2026