Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Multi-Form Merge Stepper Block for Radix UI

A visa application split into Personal, Work history and References sections filled in any order, each with a live count of fields left, merged into one summary before submitting.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people fill in separate forms in the order they like and then bring them together, with this multi-form stepper for React with Radix UI. A hairline frame with plus marks holds three ruled Collapsible sections, Personal, Work history and References, each with two or three real fields built from Field, Input and Native Select. A section's header shows a number or a check and a state worked out from its fields: "Incomplete (2 fields left)" or "Complete". Under them a Data List shows the merged application, with "Missing" wherever a field is not valid yet. "Submit application" is the block's one Shine Button and works only when all three sections are complete. For visas, applications, onboarding and any form long enough to split.

FAQ

How do I change the fields?

Edit SECTIONS and FIELDS at the top of the file. Each field has an id, a section, a label, a kind (text, date, email, number or select) and a hint. validText holds the rule for each kind, and the counts, the section states and the merged list follow from them.

What counts as complete?

A text field needs two characters, the date must be at least 18 years before 9 Oct 2026, the email needs an at sign and a domain, years must be a whole number up to 60, and the country must be chosen. A hint appears under a field only after it holds something invalid.

What happens when I press Submit early?

The button is marked aria-disabled rather than disabled, so it stays focusable, and pressing it says how many fields are left and in which sections. Once everything is valid it ends on "Application merged in this demo" and offers Edit application.

What stays local?

Everything typed is component state, lost on reload; nothing is sent, and the date of birth, name and referee are sample values to replace. To make it real, post values from the submit handler and save each section as it becomes complete.

How does the keyboard work?

Each section header is a button: Enter or Space opens or closes it, and Tab moves into its fields. A closed section is inert, so its fields are out of the tab order until it opens.

How does it look on a phone?

The fields in a section stack in one column, and the merged list keeps its two columns. The foot with the status and the button sticks to the bottom of the screen while the form is taller than it.

All 100 stepper blocks