Stepper

This guide provides comprehensive information on when and how to use steppers effectively in your applications.

Basic Stepper Example

Simple 3-step workflow perfect for getting started with steppers. Ideal for linear processes.

User Info

Settings

Complete

User Information

Please provide your basic information to get started with the setup process.

Step 1 of 3

How to Use

Step-by-step guide to implement steppers in application.

Import

Create Components

Configure Hook

Render

1. Import Dependencies

Import CustomizedStepper, useStepper from @sistent/sistent and your icons

Step 1 of 4

Best Practices

Step Design

Keep step labels short and descriptive (1-3 words)
Use meaningful icons that relate to step content
Limit to 3-7 steps maximum for better usability
Group related tasks into single steps

Navigation

Always provide a "Back" button (except on first step)
Disable "Next" until current step is valid
Use clear action labels: "Continue", "Next", "Finish"
Show progress indicator (current step / total steps)

User Experience

Validate input before allowing progression
Save progress automatically when possible
Provide clear error messages with solutions
Allow users to edit previous steps
Show completion status for each step

Layer5 is the steward of Meshery and creator of Kanvas, the collaborative canvas for cloud-native infrastructure. We bridge the gap between design and operation, allowing engineers to create, configure, and deploy orchestratable diagrams in real time. Whether managing Kubernetes or multi-cloud environments, Layer5 provides the tooling needed to oversee modern infrastructure with confidence.