This site uses cookies from Google to deliver its services and to analyze traffic.
More details

Stepper

Autocomplete Badge Bottom Sheet Button Button toggle Card Checkbox Chips Core Datepicker Dialog Divider Expansion Panel Form field Grid list Icon Input List Menu Paginator Progress bar Progress spinner Radio button Ripples Select Sidenav Slide toggle Slider Snackbar Sort header Stepper Table Tabs Toolbar Tooltip Tree
Examples for stepper
Stepper animations
Fill out your name
Fill out your address
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

Go to a different step to see the error state

Go to a different step to see the error state

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
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
Editable
Fill out your name
Fill out your address
Done

You are now done.

Editable
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
Indigo & Pink theme selected.