# Blazor Stepper Overview

The <a href ="https://www.telerik.com/blazor-ui/stepper"><strong>Stepper for Blazor</strong></a> is a component that renders a path formed by a sequence of logical steps towards a bigger action. The Stepper indicates the user’s progress within this action by showing the steps left for them to complete it. It makes the user experience less overwhelming as it breaks the long process into smaller parts.

The Stepper provides several features out of the box, including the ability to define the appearance of each [step](https://www.telerik.com/blazor-ui/documentation/components/stepper/steps/overview), [validation](https://www.telerik.com/blazor-ui/documentation/components/stepper/steps/validation) for the steps, strict [linear flow](https://www.telerik.com/blazor-ui/documentation/components/stepper/linear-flow) and [step template](https://www.telerik.com/blazor-ui/documentation/components/stepper/step-template) to make the it fit any design requirements.

## Creating Blazor Stepper

1. Add the `TelerikStepper` tag to add the component to your razor page.

2. Set the `Value` parameter (`int`) to define the current step index. It supports one-way and two-way binding.

3. Add [`StepperStep` instances](https://www.telerik.com/blazor-ui/documentation/components/stepper/steps/overview) inside the `StepperSteps` tag.

4. (optional) Set the `Icon` and `Label` `StepperStep` properties.

> caption Simple setup of a Stepper component.

<demo metaUrl="client/stepper/overview/example-1/" height="320"></demo>

## Steps

The Steps are the building blocks of the Stepper component. Include the desired steps by adding a `StepperStep` tag for every step. Then, configure each `StepperStep` appearance via its parameters. [Read more about the Blazor Steps configuration](https://www.telerik.com/blazor-ui/documentation/components/stepper/steps/overview).

## Orientation

The Stepper component provides horizontal and vertical orientations. [Read more about the Blazor Stepper orientation](https://www.telerik.com/blazor-ui/documentation/components/stepper/orientation).

## Display Modes

The Stepper steps can display labels and icons. [Read more about the Blazor Stepper display modes](https://www.telerik.com/blazor-ui/documentation/components/stepper/display-modes).

## Linear Flow

By default, the user can select any step in the Stepper component and go to it directly. This behavior can be changed with the `Linear` parameter, so that the user goes through the steps sequentially. [Read more about the Blazor Stepper linear flow](https://www.telerik.com/blazor-ui/documentation/components/stepper/linear-flow).

## Templates

You can use the functionality of the built-in templates and customize what is rendered as steps. [Read more about the Blazor Stepper templates](https://www.telerik.com/blazor-ui/documentation/components/stepper/step-template).

## Events

The Blazor Stepper generates events that you can handle and further customize its behavior. [Read more about the Blazor Stepper events](https://www.telerik.com/blazor-ui/documentation/components/stepper/events).

## Stepper Parameters

The Blazor Stepper provides various parameters that allow you to configure the component:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Parameter     | Type and Default Value                          | Description                                                                                                                                                                                         |
| ------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Value`       | `int`                                           | Defines the current step index.                                                                                                                                                                     |
| `Orientation` | `StepperOrientation` enum <br /> (`Horizontal`) | Defines the orientation of the Stepper. You can read more on how to configure it in the [Orientation](https://www.telerik.com/blazor-ui/documentation/components/stepper/orientation) article.      |
| `Linear`      | `bool`                                          | Enables/disables [linear flow](https://www.telerik.com/blazor-ui/documentation/components/stepper/linear-flow).                                                                                     |
| `StepType`    | `StepperStepType` enum <br /> (`Steps`)         | Defines the display mode of the Stepper. You can read more on how to configure it in the [Display modes](https://www.telerik.com/blazor-ui/documentation/components/stepper/display-modes) article. |

## Next Steps

* [Configure Steps](https://www.telerik.com/blazor-ui/documentation/components/stepper/steps/overview)
* [Use Stepper Templates](https://www.telerik.com/blazor-ui/documentation/components/stepper/step-template)
* [Explore Stepper Events](https://www.telerik.com/blazor-ui/documentation/components/stepper/events)

## See Also

* [Live Stepper Demos](https://demos.telerik.com/blazor-ui/stepper/overview)

* [Stepper API Reference](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.telerikstepper)