Stepper animations
Fill out your name
Fill out your address
Done
You are now done.
Stepper with editable steps
Fill out your name
Fill out your address
Done
You are now done.
Stepper that displays errors in the steps
Fill out your name
Fill out your address
Done
You are now done.
Testing with MatStepperHarness
This example contains tests. Open in Stackblitz to run the tests.
Stepper header position
Fill out your name
Fill out your address
Optional
Done
You are now done.
Stepper that uses the MatStepperIntl service
Fill out your name
Fill out your address
Optional Label
Done
You are now done.
Stepper label bottom position
Fill out your name
Fill out your address
Optional
Done
You are now done.
Stepper lazy content rendering
Step 1
This content was rendered lazily
Step 2
Step 3
This content was rendered eagerly
Stepper with optional steps
Fill out your name
Fill out your address
Done
You are now done.
Stepper overview
Fill out your name
Fill out your address
Done
You are now done.
Stepper responsive
Make your screen smaller to see a vertical stepper
Fill out your name
Fill out your address
Fill out your phone number
Done
You are now done.
Stepper with customized states
Fill out your name
Fill out your address
Done
You are now done.
Step 1
Step 2
Step 3
Put down your phones.
Socialize with each other.
You're welcome.
Stepper vertical
Fill out your name
Fill out your address
Done
You are now done.