---
title: Overview
position: 1
seo_title: Overview of the Stepper Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Stepper component and its types, check out the extensive set of available
  options in its live demo, and master its appearance by setting its variants
  and layout as you wish on the fly.
---
## Stepper Overview

The primary purpose of the Stepper UI component is to guide users through a multi-step process or workflow. It breaks down a larger task into smaller, manageable steps, allowing users to navigate through them sequentially.  

It enables setting up validation and error logic to ensure that the user is provided with clear feedback on their actions. 

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/stepper/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/stepper/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/stepper/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/stepper/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/stepper/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/stepper"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/stepper"}],"demo":"components/stepper/overview"}'></LiveDemo>

### Appearance

The Stepper component provides built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI Stepper, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

#### States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI Stepper can acquire the following states which you can set by using the following classes:

* `k-step-current`—In the current state, the step appears selected and focused, allowing the user to interact with it.
* `k-step-done`—The completed steps appear in the done state and the user can still interact with them.
* The steps that follow the current one are in the normal state and appear active, clickable, and usable.
* `k-hover`—Тhe hover state of a step is applied after the user hovers over the step indicator.
* `k-focus`—The focus state is triggered after the Stepper has been spotlighted with the mouse or the keyboard.
* `k-step-success`—The success state is triggered after a step has been completed successfully. This optional state is determined by the validation logic set by the developer. 
* `k-step-error`—The error state indicates that the step has not been completed due to incorrect or incomplete data entered by the user.
* `k-disabled`—Тhe disabled state of the Stepper component indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.

The anatomy of the Stepper summarizes the elements of the component and includes: 

<BlueprintImage data='{"description":"","labels":[{"text":"Step"},{"text":"Indicator"},{"text":"Label"},{"text":"Progress bar"}]}'>![A Telerik and Kendo UI Stepper component with the step, indicator, label, and progress bar elements.](images/components-stepper-overview-anatomy-v2.png "Anatomy and elements of a Telerik and Kendo UI Stepper component with the step, indicator, label and progress bar elements.")</BlueprintImage>

#### Variants

Depending on the elements they display, the Telerik and Kendo UI Stepper can be any of the following types:

* Indicator only
* Indicator and label
* Label only

<BlueprintImage data='{"description":"","labels":[{"text":"Indicator only"},{"text":"Indicator and label"},{"text":"Label only"}]}'>![The three variants of the Telerik and Kendo UI Stepper, including Indicator only, Indicator and label, and Label only modes](images/components-stepper-overview-variants-v2.png "The three variants of the Telerik and Kendo UI Stepper")</BlueprintImage>

#### Layout

The Telerik and Kendo UI Stepper can appear both in horizontal and vertical orientations.

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal"},{"text":"Vertical"}]}'>![The two variants of the Telerik and Kendo UI Stepper, including horizontal and vertical layout.](images/components-stepper-overview-layout-v2.png "The two layout variants of the Telerik and Kendo UI Stepper")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Stepper","description":"Find more information about the Kendo UI for Angular Stepper in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/stepper/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Stepper","description":"Find more information about the Telerik UI for Blazor Stepper in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/stepper/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Stepper","description":"Find more information about the Kendo UI for jQuery Stepper in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/stepper/overview"}'>![Kendo UI for jQuery logo](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Stepper","description":"Find more information about the KendoReact Stepper in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/stepper/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Stepper","description":"Find more information about the Kendo UI for Vue Stepper in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/stepper/"}'>![Kendo UI for Vue logo](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Stepper","description":"Find more information about the Telerik UI for ASP.NET Core Stepper component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/stepper/overview"}'>![Telerik UI for ASP.NET Core logo](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Stepper","description":"Find more information about the Telerik UI for ASP.NET MVC Stepper component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/stepper/overview"}'>![Telerik UI for ASP.NET MVC logo](/images/mvc-logo.svg)</ExternalResource>

</Wrap>