Add MultiStepForm component

[KirklandGee]

Component: MultiStepForm

Description

A progressive multi-step form component that breaks long forms into sequential steps with smooth slide transitions. Displays a visual progress indicator at the top showing current, completed, and remaining steps. Each step contains a configurable group of form fields including text inputs, select dropdowns, textareas, and checkboxes with validation. Navigation buttons at the bottom allow moving between steps with 'Back' and 'Next' (changing to 'Submit' on final step). Validates required fields before allowing progression. Includes a final review/summary step displaying all entered values before submission. Supports 2-6 configurable steps with titles and optional descriptions. Fully responsive with vertically stacked fields on mobile and horizontal progress indicator that adapts to smaller screens.

What's Included

• React component with scoped CSS (no Tailwind, no shadcn)
• Colors via CSS site variables: var(--background-primary, #ffffff), etc.
• Typography via inheritance: font-family: inherit; color: inherit;
• Full prop surface (MultiStepForm.webflow.tsx) — 20+ props for developers/agencies
• Simple prop surface (MultiStepFormSimple.webflow.tsx) — core text/link props for clients
• All CSS classes prefixed with wf-multi-step-form- for Shadow DOM safety

Testing

• npm install && npm run dev runs locally
• npx webflow library share imports successfully
• Full and simple prop surfaces render in Webflow canvas
• Site variables wire up correctly

[KirklandGee]

Preview

Light Theme

Dark Theme

Brand Theme

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​types/​react-dom@​18.3.7 ⏵ 19.2.3
	@​types/​react@​18.3.24 ⏵ 19.2.14	+1
	vite@​7.3.1
	react@​19.2.4
	react-dom@​19.2.4
	@​vitejs/​plugin-react@​5.1.4
	@​webflow/​data-types@​1.2.1
	@​webflow/​react@​1.2.1
	@​webflow/​webflow-cli@​1.12.3

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		License policy violation: npm caniuse-lite under CC-BY-4.0 Location: Package overview From: ? → npm/@vitejs/plugin-react@5.1.4 → npm/@webflow/webflow-cli@1.12.3 → npm/caniuse-lite@1.0.30001776 ℹ Read more on: This package | This alert | What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/caniuse-lite@1.0.30001776. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		License policy violation: npm lodash under CC0-1.0 AND MIT Location: Package overview From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/lodash@4.17.23 ℹ Read more on: This package | This alert | What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/lodash@4.17.23. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		License policy violation: npm memfs under Unlicense Location: Package overview From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/memfs@3.6.0 ℹ Read more on: This package | This alert | What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/memfs@3.6.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		License policy violation: npm vite Location: Package overview From: multi-step-form/package.json → npm/vite@7.3.1 ℹ Read more on: This package | This alert | What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/vite@7.3.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Dynamic code execution: npm @babel/plugin-transform-async-generator-functions Eval Type: Function Location: Package overview From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/@babel/plugin-transform-async-generator-functions@7.29.0 ℹ Read more on: This package | This alert | What is dynamic code execution? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@babel/plugin-transform-async-generator-functions@7.29.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Dynamic code execution: npm @babel/plugin-transform-explicit-resource-management Eval Type: Function Location: Package overview From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/@babel/plugin-transform-explicit-resource-management@7.28.6 ℹ Read more on: This package | This alert | What is dynamic code execution? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@babel/plugin-transform-explicit-resource-management@7.28.6. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Dynamic code execution: npm async-generator-function Eval Type: Function Location: Package overview From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/async-generator-function@1.0.0 ℹ Read more on: This package | This alert | What is dynamic code execution? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/async-generator-function@1.0.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Dynamic code execution: npm generator-function Eval Type: Function Location: Package overview From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/generator-function@2.0.1 ℹ Read more on: This package | This alert | What is dynamic code execution? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/generator-function@2.0.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Deprecated by its maintainer: npm koa-compose Reason: koa-compose@4.2.0 is a breaking version, please either use <= v4.1 or upgrade to v5.x once it is released From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/koa-compose@4.2.0 ℹ Read more on: This package | This alert | What is a deprecated package? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Research the state of the package and determine if there are non-deprecated versions that can be used, or if it should be replaced with a new, supported solution. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/koa-compose@4.2.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Deprecated by its maintainer: npm memfs with reason "this will be v4" Reason: this will be v4 From: ? → npm/@webflow/webflow-cli@1.12.3 → npm/memfs@3.6.0 ℹ Read more on: This package | This alert | What is a deprecated package? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Research the state of the package and determine if there are non-deprecated versions that can be used, or if it should be replaced with a new, supported solution. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/memfs@3.6.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report