Back

Stepper

Interactive Demo

Use the buttons to navigate between steps.

1
Account
2
Profile
3
Payment
4
Review
Step of 4

Vertical Layout

Ideal for sidebar progress or complex multi-step forms.

Account Information Set up your login details
2
Personal Profile Tell us about yourself
3
Security Check Enable two-factor authentication
4
Complete Registration

Status Indicators

Highlight errors or warnings within the process.

Initialised
Processing
Validation
4
Deployment

Usage

@navigation.Stepper(navigation.StepperProps{
    CurrentStep: 2,
    Vertical:    true, // optional vertical mode
}, []navigation.StepProps{
    {
        Index:       1,
        Label:       "Step 1",
        Description: "Detailed description",
        Status:      "warning", // optional override
    },
    { Index: 2, Label: "Step 2" },
})