# Steps

Source: https://lumeo.nativ.sh/components/steps

# Steps

A step tracker for multi-step workflows and wizards.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Steps />

## When to Use

-   Multi-step processes such as forms, registrations, or checkout flows
-   Setup wizards that guide users through sequential configuration
-   Onboarding flows where users complete tasks in a defined order
-   Checkout or payment workflows with clearly defined stages

Preview Code

Basic Steps

Account

Create your account

2

Profile

Set up your profile

3

Complete

All done

Preview Code

Interactive Steps

1

Details

2

Payment

3

Review

4

Confirm

Current step: 0

Previous Next

Preview Code

Vertical Steps

Sign Up

Create an account

Verify Email

Confirm your email address

3

Set Password

Choose a secure password

4

Done

Start using the app

Preview Code

Orientation (interactive)

Switch orientation to compare horizontal and vertical layouts.

Horizontal Vertical

Account

Create your account

2

Profile

Set up your profile

3

Payment

Add billing info

4

Done

All finished

Preview Code

Animated Steps

Account

Create your account

2

Profile

Set up your profile

3

Payment

Add billing

4

Complete

All done

Previous Next

Active dot pulses; the connector draws in on Next and retracts on Previous.

## API Reference

### Steps

Property

Type

Default

Description

CurrentStep

int

0

Zero-based index of the current step.

Clickable

bool

false

Allow clicking on steps to navigate.

Orientation

Lumeo.Orientation

Horizontal

Layout direction. Values: Horizontal, Vertical.

Animated

bool

false

When true, the current step's indicator pulses and completed connectors draw themselves in.

CurrentStepChanged

EventCallback<int>

—

Two-way binding callback for the active step index.

### StepsItem

Property

Type

Default

Description

Title

string?

null

Step title text.

Description

string?

null

Optional description below the title.

Status

StepsItemStatus

Auto

Explicit status override. Values: Auto, Upcoming, Active, Complete, Error.

IconContent

RenderFragment?

null

Custom icon slot for this step.

## Related Components

-   [Progress](/components/progress) — Show completion percentage instead of discrete steps
-   [Tabs](/components/tabs) — Switch between views without implying sequential order
-   [Timeline](/components/timeline) — Display events chronologically rather than as actionable steps