Stepper

Progressive forms and wizards that guide users through multi-step processes. Only the current step is shown, reducing cognitive load.

i Core doesn't include a Stepper component. This mockup shows how to build one from <details> elements with ~30 lines of vanilla JavaScript for step coordination.

Personal

Security

Review

First Name

Last Name

Email Address

Step 1 of 3

Password

At least 8 characters with a number and special character

Confirm Password

Step 2 of 3

Name John Doe

Email john@example.com

Password --------

By completing this setup, you agree to our Terms of Service and Privacy Policy.

Step 3 of 3

Reduced Overwhelm

Users only see one step at a time, making complex processes feel manageable.

Clear Progress

Visual indicators show completion status and remaining steps at a glance.

Flexible Navigation

Users can jump to any step, go back to correct errors, or skip ahead.