|
1 | | -Our upcoming major release (v25.1) will introduce a Stepper component designed to describe/detail progress as users navigate through a defined sequence. |
| 1 | +The DevExtreme Stepper is a UI component that indicates progress in a multi-step process and enables users to navigate between individual steps. You can add Stepper components to lengthy data entry forms such as guest checkouts or credit card applications. |
| 2 | + |
| 3 | +To get started with DevExtreme Stepper, refer to the following step-by-step tutorial: [Getting Started with Stepper](/Documentation/Guide/UI_Components/Stepper/Getting_Started_with_Stepper/). |
2 | 4 | <!--split--> |
3 | | -Stepper will work especially well for multi-step processes like filling forms, onboarding flows, or wizards. |
4 | 5 |
|
5 | | -You will be able to customize the appearance of individual steps and modify component settings to address specific usage scenarios. |
| 6 | +## Component Configuration |
| 7 | + |
| 8 | +The following settings are available: |
| 9 | + |
| 10 | +- [orientation](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#orientation) (default: *'horizontal'*) |
| 11 | +The Stepper's orientation. |
| 12 | +- [linear](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#linear) (default: `true`) |
| 13 | +Specifies whether users must navigate the Stepper sequentially or can skip steps. |
| 14 | +- [selectOnFocus](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#selectOnFocus) (default: `true`) |
| 15 | +Specifies whether steps focused with keyboard arrows are selected automatically. |
| 16 | +- [rtlEnabled](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#rtlEnabled) (default: `false`) |
| 17 | +Switches the Stepper to Right-to-Left mode. |
| 18 | + |
| 19 | +## Step Settings |
| 20 | + |
| 21 | +To add steps, populate the [items](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/) collection or specify a [dataSource](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#dataSource). |
| 22 | + |
| 23 | +Use the following properties to customize steps: |
| 24 | + |
| 25 | +- [text](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#text) |
| 26 | +Indicator text. If you do not define this option, Stepper numbers steps sequentially. |
| 27 | +- [icon](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#icon) |
| 28 | +Indicator icon. Stepper prioritizes icons over the **text** property. |
| 29 | +- [label](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#label) |
| 30 | +Step caption displayed next to the indicator. |
| 31 | +- [optional](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#optional) |
| 32 | +Adds an *(Optional)* label to the step. |
| 33 | +- [isValid](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#isValid) |
| 34 | +Allows you to indicate that user input on the step results in validation errors. |
| 35 | +- [disabled](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#disabled) |
| 36 | +Deactivates the step. |
| 37 | +- [hint](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#hint) |
| 38 | +Tooltip text for the step. |
| 39 | +- [template](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#template) |
| 40 | +Allows you to customize the step. This property overrides all other step properties. |
0 commit comments