---
title: "Pages and layout"
description: "Split a form into pages, show progress, and keep layout ownership in the right renderer."
group: "Build forms"
order: 3
type: "feature"
keywords:
  - "pages"
  - "page break"
  - "progress"
  - "multi-step"
  - "layout"
updated: "2026-07-14"
---

Pages split one form into validated steps while keeping every answer in the same response.

## When to add a page

Add a page when the respondent hits a clear phase change, when a follow-up shouldn't distract from the first decision, or when a long form needs a visible sense of progress. Related questions can stay together — Fillo doesn't force one question per page.

## In the dashboard

1. Select **Add block** where the next step should begin.
2. Choose **Page break**.
3. Give the new page a short title when the phase needs explanation.
4. Reorder fields within the page.
5. Preview Back, Next, validation, and narrow-screen behavior.

The built-in renderer shows progress on a multi-page form unless `showProgress` is false.

## In code

```ts
const onboarding = defineForm({
  id: "onboarding",
  pages: [
    {
      id: "account",
      title: "Your account",
      blocks: [
        { id: "email", kind: "email", label: "Work email", required: true },
      ],
    },
    {
      id: "goals",
      title: "What you need",
      blocks: [
        { id: "goal", kind: "long_text", label: "What are you trying to do?" },
      ],
    },
  ],
  settings: { showProgress: true },
});
```

Page IDs are jump targets, so keep them stable when logic points to them.

## Layout limits

The default React and DOM renderers stack blocks in one column. There's no column-width or grid-position setting in the schema. Use the `appearance` slots for visual spacing, or reach for `FilloProvider` or `createFormController` when your app needs a multi-column layout.

Progress shows the current reachable page position. Page jumps and early end can change which pages are reachable — and the shared logic engine uses that same path during server validation.

## Related

- [Logic](/docs/logic): Jump to another page, end early, or conditionally reveal a block.
- [Custom UI](/docs/custom-ui): Place fields in a host-owned grid without changing the schema.
- [Styling](/docs/styling): Adjust the built-in renderer with theme and appearance slots.