Steps / Progress

Navigation
Progress

Step-by-step progress indicators for wizards, onboarding, and multi-step forms.

Horizontal Steps

Classic horizontal progress indicator with step numbers and connecting lines.

Vertical Steps

Vertical progress indicator for sidebar wizards and longer step descriptions.

Features

Check Marks

Completed steps show check mark icon for clear visual feedback.

Active Ring

Current step highlighted with focus ring for emphasis.

Clickable Steps

Allow navigation between steps with hover states.

Usage

Use steps/progress for:

  • Multi-step forms and registration flows
  • Onboarding sequences
  • Checkout processes
  • Setup wizards and configuration
  • Use vertical variant for sidebar placement or longer descriptions