# Step form

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/step-form

The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the step's title and your fields, one accent Continue; a side panel with the steps and the answers so far (each with Edit); an automatic review step, sending and done.

## Use it for

- Any form of more than one screen you compose from fields: onboarding, client intake briefs, questionnaires, bookings, applications. You write each step's fields with the right elements; the block gives the finished layout, progress, the answers panel, review, errors, sending and done. It is the form element itself: keep the answers in useState and check each step in its validate; the form package is not needed.

## Not for

- Account creation ([signup-form](https://beamline.io/components/signup-form)) or [sign-in](https://beamline.io/components/sign-in) ([sign-in](https://beamline.io/components/sign-in), auth).
- Account settings ([settings](https://beamline.io/components/settings)).
- A short one-screen form ([form](https://beamline.io/components/form) inside a [card](https://beamline.io/components/card) or [dialog](https://beamline.io/components/dialog)).
- Showing progress of work that is not a form ([stepper](https://beamline.io/components/stepper), [plan](https://beamline.io/components/plan)).

## Anatomy

- root (container-sized: two columns from about 900 px, one below)
- card: progress line (step N of M and a thin bar), step title, step description
- fields: your elements for the step, in a native form so Enter continues
- error: the validate message above the actions
- actions: Back (ghost) and Continue / Submit (accent, keeps its size while sending)
- aside: the steps as a vertical stepper (done steps reopen), then Your answers grouped by step with Edit
- review step: every answer grouped by step, each group with Edit; Submit sends
- done: a check, your title and message, and your action

## States

- a step in progress
- step refused by validate (message shown, first invalid field focused)
- checking (async validate: Continue shows its loader)
- review
- sending (Submit loading, everything else inert)
- send failed (the rejection's message above the actions, the answers kept)
- done

## Keyboard

- Enter in a field continues (the step is a form)
- Tab reaches the fields, Back and Continue, then the aside's done steps and Edit links
- a refused step moves focus to its first field marked aria-invalid, else to the message
- a new step moves focus to its title

## Motion

A new step arrives on --pui-motion-in (fade and a 6 px rise from the side it comes from); the progress bar fills over --pui-motion-out; answers in the aside appear with a fade. Reduced motion keeps the fades only. Nothing moves at rest.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` (required) | `StepFormStep[]` | — | { id, title, description?, content, validate? } — content is your fields; validate returns true to move on, false to stay (your fields show their own errors) or a message, sync or async. |
| `onSubmit` (required) | `() => Promise<void>` | — | Send the answers you hold in your own state. Reject with an Error and its message shows above the actions. |
| `summary` | `StepFormAnswer[]` | — | { step, label, value } for the aside and the review step; a null/empty value shows as Not answered. Without it there is no answers panel and the last step submits. |
| `review` | `boolean` | `true when summary is given` | Adds the review step before sending. |
| `aside` | `ReactNode` | — | More in the side panel under the answers: what happens next, a contact. |
| `done` | `{ title, description?, action? }` | — | What the done state says and offers. |
| `step / defaultStep / onStepChange` | `number / number / (index: number) => void` | — | The step in view, controlled or not (the review step is steps.length). |
| `labels` | `{ continue?, back?, submit?, review?, answers?, notAnswered?, edit? }` | — | Every word the block shows, for your language. |

## Built from

- stepper
- button
- alert
- badge

## Dependencies

`lucide-react`

## Import

```tsx
import { StepForm } from "@/blocks/step-form/step-form";
```

## Get it

Step form is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Blocks

- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with…
- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…