Stepper

Mar 03, 2026
3 minutes to read

Stepper is a UI control that allows you to display and analyze multi-dimensional data.

Run Demo: Stepper Read Tutorial

Getting Started

The Stepper UI Control is based on the DevExtreme Stepper component.

The following help topics explain how to add this control to your project:

cshtml

@(Html.DevExtreme().Stepper()
    .Items(i => {
        i.Add().Label("Ready");
        i.Add().Label("Set");
        i.Add().Label("Go");
    })
)

cshtml

using Microsoft.AspNetCore.Mvc;

namespace ASP.NET_Core.Controllers {
    public class StepperController : Controller {
        public IActionResult GettingStarted() {
            return View();
        }
    }
}

Built-in Capabilities and Configuration Guides

Orientation Options
Stepper supports horizontal and vertical orientation options.
Navigation Modes
The linear property enables sequential navigation. Disable linear to allow users to skip steps.
Step Types and States
The component offers various step types and states such as optional and disabled. You can also indicate step validity with the isValid property.

Step Customization
Stepper offers multiple step customization options like configurable step labels and hints. You can also set custom step icons or text.
Advanced Customization with Templates
Implement in-depth customizations such as custom step shapes with item templates. To do so, define itemTemplate or items[].template.
Selection Options
You can get and set the selected step with selectedItem and selectedIndex. Implement custom logic upon selection change with onSelectionChanged and onSelectionChanging.
Keyboard Navigation
Stepper supports keyboard navigation. The component automatically selects steps focused with the keyboard if selectOnFocus is enabled.
Right-to-Left Mode
Switch between left-to-right and right-to-left progression on horizontal Steppers with the rtlEnabled property. rtlEnabled changes the placement of step labels on vertical Steppers.

API

Server-Side API

InitializationCall the Stepper() method to create a Stepper control. This action initializes a StepperBuilder instance. Use the instance methods to specify Stepper options and event handlers.OptionsFor a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.EventsFor available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

OptionsIf you need to specify the Stepper options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme Stepper options.MethodsFor a list of available methods, see DevExtreme Stepper methods. For details on how to call methods, refer to the following help topic: Call Methods.

Demos

Run Demo: Stepper