All docs
V25.1
25.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Stepper - Overview

DevExtreme Stepper is an interactive UI component for implementing multi-step forms and processes in your project, like sign-up forms, checkouts, set-up wizards, and more.

This overview highlights Stepper elements and key features.

Key Features

  • 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.

Stepper step types

  • 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.

    View Demo

  • 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.