Step form

A React block (a whole screen) in Beamline's Blocks category.

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) or sign-in (sign-in, auth).
Account settings (settings).
A short one-screen form (form inside a card or dialog).
Showing progress of work that is not a form (stepper, 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

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 · Connect your agent