Stepper

shellui add stepper

<Stepper StepItems="@steps" @bind-CurrentStep="currentStep" />

@code {
    private int currentStep = 0;

    private List<StepItem> steps = new()
    {
        new()
        {
            Title = "Account",
            Description = "Create your account",
            Content = @<div class="space-y-4">
                <Input Placeholder="Email" />
                <Input Placeholder="Password" Type="password" />
            </div>
        },
        new()
        {
            Title = "Profile",
            Description = "Set up your profile",
            Content = @<div class="space-y-4">
                <Input Placeholder="Full Name" />
                <Textarea Placeholder="Bio" />
            </div>
        },
        new()
        {
            Title = "Review",
            Description = "Review and submit",
            Content = @<div class="text-sm text-muted-foreground">
                <p>Review your information and click Finish.</p>
            </div>
        }
    };
}

<Stepper StepItems="@steps"
         @bind-CurrentStep="step"
         ShowNavigation="false" />

<div class="mt-4 flex justify-between">
  <Button Variant="ButtonVariant.Outline"
          Disabled="@(step == 0)"
          OnClick="() => step--">
    Back
  </Button>
  @if (step < steps.Count - 1)
  {
    <Button OnClick="() => step++">Continue</Button>
  }
  else
  {
    <Button OnClick="HandleFinish">Submit</Button>
  }
</div>

@code {
    private int step = 0;

    private void HandleFinish() { /* Final submission */ }
}

<Stepper StepItems="@steps" @bind-CurrentStep="current" />

@code {
    private int current = 2;

    private List<StepItem> steps = new()
    {
        new() { Title = "Details", Description = "Completed", IsCompleted = true },
        new() { Title = "Payment", Description = "Completed", IsCompleted = true },
        new()
        {
            Title = "Confirmation",
            Description = "In progress",
            Content = @<p>Confirm your order.</p>
        }
    };
}

<Stepper StepItems="@steps" @bind-CurrentStep="current" />

@code {
    private int current = 0;

    private List<StepItem> steps = new()
    {
        new() { Title = "Required Info", Content = @<p>Fill in required fields.</p> },
        new() { Title = "Additional Info", IsOptional = true, Content = @<p>Optional details.</p> },
        new() { Title = "Finish", Content = @<p>All done!</p> }
    };
}

<Stepper StepItems="@steps"
         @bind-CurrentStep="current"
         AllowClickToPrevious="false" />