Library · Forms & CTAs
Form / Multi-Step Wizard
Progressive multi-step form with a step indicator; Next is gated on the current step's required fields (tested logic in lib/sections/interactions). No-JS renders all steps as one submittable form. Tone via the shared contract.
Figma: Form / Multi-Step Wizard ↗---
import FormWizard from "../components/figma/FormWizard.astro";
---
<FormWizard
heading="Enquire in three quick steps"
action="/enquire"
tone="base-200"
steps={[
{ title: "About you", fields: [
{ name: "name", label: "Full name", required: true },
{ name: "email", label: "Email", type: "email", required: true },
] },
{ title: "Your interest", fields: [
{ name: "development", label: "Development", kind: "select", required: true, options: [
{ value: "riverside", label: "Riverside Residences" },
{ value: "parkview", label: "Parkview Terraces" },
] },
{ name: "budget", label: "Budget range", kind: "select", options: [
{ value: "u500", label: "Under $500k" },
{ value: "500-750", label: "$500k–$750k" },
] },
] },
{ title: "Anything else", fields: [
{ name: "message", label: "Your message", kind: "textarea" },
{ name: "consent", label: "Please contact me about this development", kind: "checkbox", required: true },
] },
]}
/>Props
| Name | Type | Required | Description |
|---|---|---|---|
steps | WizardStep[]; | Yes | Ordered steps |
action | string; | Yes | Form submit URL |
submitLabel | string; | — | Final submit label (default: 'Submit') |
heading | string; | — | Optional heading |
tone | "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral"; | — | Background tone — the Figma colour-variant axis |
Example with all props
<FormWizard
heading="Enquire in three quick steps"
action="/enquire"
steps={[
{ title: "About you", fields: [{ name: "name", label: "Full name", required: true }] },
{ title: "Anything else", fields: [{ name: "message", label: "Your message", kind: "textarea" }] },
]}
/>