React Stepper - StepperItem

A stepper item (step).

Type:

Object

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the UI component item responds to user interaction.

Type:

Boolean

Default Value: false

hint

Specifies the hint text that appears when an item (step) is hovered over or long-pressed.

Type:

String

NOTE
An item's hint has priority over the component's hint.

icon

Specifies the indicator icon.

Type:

String

This property accepts one of the following:

NOTE
Do not use the icon property if you use text, and vice versa.

isValid

Specifies a visual indicator for validation.

Type:

Boolean

  • If false, a step displays a "validation failed" state.
  • If true, a step displays a "validation succeeded" state.
  • If undefined, a step shows no validation information.

View Demo

label

Specifies the caption displayed next to the step.

Type:

String

optional

Marks the step as optional.

Type:

Boolean

  • If false or undefined, a step shows no "optional" information.
  • If true, a step displays an "(Optional)" caption.

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

jQuery

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component.

index.js
 $(function() { $("#stepperContainer").dxStepper({ // ... items: [ { // ... template: '<div>Custom Item</div>' } ] }); });
Angular

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular uses custom templates instead of the template property.

app.component.html
app.component.ts
app.module.ts
 <dx-stepper ... > <dxi-item ... > <div *dxTemplate> <div>Custom Item</div> </div> </dxi-item> </dx-stepper>
 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... }
 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxStepperModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxStepperModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Vue uses custom templates instead of the template property.

App.vue
 <template> <DxStepper ... > <dxItem ... > <div>Custom Item</div> </dxItem> </DxStepper> </template> <script> import DxStepper, { DxItem } from 'devextreme-vue/stepper'; export default { components: { DxStepper, DxItem }, // ... } </script>
React

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. In React, specify the render or component properties.

App.js
 import React from 'react'; import Stepper, { Item } from 'devextreme-react/stepper'; const renderCustomItem = () => { return <div>Custom Item</div>; } const App() = () => { return ( <Stepper ... > <Item ... render={renderCustomItem} > </Item> </Stepper> ); } export default App;
See Also

text

Specifies text displayed for the UI component item.

Type:

String

If you use both this property and a template, the template overrides the text.