@page "/steps"
@page "/docs/guides/components/steps.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Steps
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Use Radzen Blazor <strong>Steps</strong> component to guide users through a process or sequence of actions. The component consists of a series of numbered steps that represent the various stages of the process.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    This demo shows a wizard-style steps component with navigation between sequential stages, including the <code>CanChange</code> event for conditional validation that prevents users from proceeding until requirements are met.
</RadzenText>

<RadzenExample ComponentName="Steps" Example="StepsConfig">
    <StepsConfig />
</RadzenExample>

<RadzenText Anchor="steps#canchange-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    CanChange event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <code>CanChange</code> event allows you to conditionally prevent the step change. Use it to ensure your users have entered all the required information before moving to the next step.
</RadzenText>
<RadzenExample ComponentName="StepsCanChange" Example="StepsCanChange">
    <StepsCanChange />
</RadzenExample>