Multi-Step Form with Progress Indicator

A multi-step form with numbered progress indicator, validation at each step, and back/next navigation

Build intuitive multi-step experiences with clear progress tracking. This form breaks complex data collection into digestible steps, validating each stage before allowing progression.

Multi-Step Form with Progress Indicator preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-multi-step.json

npx shadcn@latest add https://www.shadcn.io/r/form-multi-step.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-multi-step.json

bunx shadcn@latest add https://www.shadcn.io/r/form-multi-step.json

Wizard

Step-by-step wizard with review

Branching

Conditional branching form logic

Stacked Sections

Stacked sections with separators

Fieldset Groups

Semantic fieldset-grouped form sections

Review Submit

Review data before final submission

Accordion Sections

Collapsible accordion form sections

FAQ

Last updated on March 24, 2026

Was this page helpful?

Multi-Select Checkbox Form

A multi-select form using checkboxes inside a popover to select multiple items with badge display

Nested Objects Form with Dot Notation

A form demonstrating deeply nested object structures using dot notation field names

Multi-Step Form with Progress Indicator