Stepper

Steppers let a user know what their current position is in a series of steps.

OverviewReactSwiftKotlin

Choose brand

Aachener ZeitungBelfast TelegraphContactoDe LimburgerDe StandaardDagblad van het NoordenFriesch DagbladGooi- en EemlanderGazet van AntwerpenHet Belang van LimburgHoogeveensche CourantHaarlems DagbladHub GazetteIndependentLeeuwarder CourantLeidsch DagbladLuxembourg TimesLuxemburger WortMeppeler CourantMediahuisHet NieuwsbladNoordhollands DagbladNieuwsblad Noordoost FrieslandNieuwe OoststellingwerverSteenwijker CourantStellingwerfSunday WorldTélécranTelegraafVirguleWhite LabelIjmuider Courant

Color Scheme: light

Choose subtheme

Default (none)BreakingSport

Usage

• Use a Stepper as a guidance for users where they need to take multiple steps in order to complete a task e.g. registrations, check-outs, etc.
• A Stepper should’ve three steps or more, but if a specific proces needs more than 5 steps, consider simplifying the process.

Anatomy

A. Completed

The completed step is indicated with a checkmark instead of the number.

B. Active

Shows the current step the user is on.

C. Uncompleted

The step that the user did not complete. Is also shown when a user completed this step and goes back to previous steps.

D. Label

The text label associated with the step.

Do’s & Don’ts

Always use clear and short labels that describe the purpose of the steps.

• Usage
• Anatomy
• Do’s & Don’ts