Stepper Multi-step wizard with a new compositional StepperList, StepperStep, and StepperContent API.
v0.3.0 overhauled the Stepper. It still binds the active step with @bind-CurrentStep, and a new compositional mode lets you place step headers and content manually. The old data-driven StepItems mode still works.
v0.2.1 v0.3.0 Data-driven only Data-driven or compositional mode No sub-components StepperList, StepperStep, StepperContent
stepper-list, stepper-step, and stepper-content are auto-installed as dependencies.
< Stepper @bind-CurrentStep = "_step" > < StepperList > < StepperStep Value = "0" Title = "Account" Description = "Create your account" /> < StepperStep Value = "1" Title = "Profile" Description = "Set up your profile" /> < StepperStep Value = "2" Title = "Review" Description = "Review and submit" /> </ StepperList > < StepperContent Value = "0" > < div class = "space-y-3 mt-6" > < Input Placeholder = "Email" /> < Input Type = "password" Placeholder = "Password" /> </ div > </ StepperContent > < StepperContent Value = "1" > < div class = "space-y-3 mt-6" > < Input Placeholder = "Full Name" /> < Textarea Placeholder = "Bio" / > </ div > </ StepperContent > < StepperContent Value = "2" > < div class = "mt-6 rounded-md border p-4 text-sm" > < p >Review your information and click Finish.</ p > </ div > </ StepperContent > </ Stepper > @code { private int _step = 0 ; } < Stepper StepItems = " @ _steps " @bind-CurrentStep = "_step" /> @code { private int _step = 0 ; private List < StepItem > _steps = new () { new () { Title = "Account" , Description = "Set up your account" , Content = @ < div >< Input Placeholder = "Email" /></ div > }, new () { Title = "Profile" , Description = "Complete your profile" , Content = @ < div >< Input Placeholder = "Full Name" /></ div > }, new () { Title = "Done" , Content = @ < p > All set !</ p > } }; } < Dialog > < DialogTrigger >Start wizard</ DialogTrigger > < DialogContent > < DialogHeader > < DialogTitle >Setup wizard</ DialogTitle > </ DialogHeader > < Stepper @bind-CurrentStep = "_step" > < StepperList > < StepperStep Value = "0" Title = "Step 1" /> < StepperStep Value = "1" Title = "Step 2" /> </ StepperList > < StepperContent Value = "0" >< p >Step 1 content</ p ></ StepperContent > < StepperContent Value = "1" >< p >Step 2 content</ p ></ StepperContent > </ Stepper > </ DialogContent > </ Dialog > @code { private int _step = 0 ; } Parameter Type Default Description CurrentStepint0Active step index (use @bind-CurrentStep) CurrentStepChangedEventCallback<int>— Fired on step change StepItemsList<StepItem>?nullData-driven mode items Classstring?nullAdditional CSS classes ChildContentRenderFragment?nullCompositional mode content
Parameter Type Default Description ChildContentRenderFragment— StepperStep headers
Parameter Type Default Description Valuestring"0"Zero-based step index Titlestring— Step label Descriptionstring?nullSecondary label
Parameter Type Default Description Valuestring"0"Shown when it matches the parent's CurrentStep ChildContentRenderFragment— Step panel content
