• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
      • Overview
      • Getting Started
      • ActionSheet
      • AppBar
      • Avatar
      • BottomNavigation
      • Breadcrumb
      • Card
      • Drawer
      • ExpansionPanel
      • GridLayout
      • Menu
      • Context Menu
      • PanelBar
      • Splitter
      • StackLayout
      • TabStrip
      • Stepper
      • TileLayoutupdated
      • Timeline
      • Globalization
      • API
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Layout / API / StepperProps / 

StepperProps

Represents the props of the KendoReact Stepper component.

NameTypeDefaultDescription

animationDuration?

number | boolean

Sets the duration of the Stepper animation. Defaults to 400ms.

children?

any

Represents the children that are passed to the Stepper.

className?

string

Specifies a list of CSS classes that will be added to the Stepper.

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

disabled?

boolean

Disables the whole Stepper.

errorIcon?

string

Specifies a custom icon that will be rendered inside the step for invalid steps.

errorSVGIcon?

SVGIcon

Specifies a custom SVG icon that will be rendered inside the step for invalid steps.

item?

React.ComponentType<StepProps>

Overrides the default component responsible for visualizing a single item (see example).

The default Component is: Step.

items

StepProps[]

The collection of steps that will be rendered in the Stepper (see example).

linear?

boolean

Specifies the linear flow of the Stepper. (see example).

mode?

"steps" | "labels"

Specifies the display mode of the Stepper (see example).

  • The possible values are:
  • (Default) steps. Render step indicator and optional label.
  • labels. Render labels only.

onChange?

(event: StepperChangeEvent) => void

The event handler that will be fired when the value is changed.

onFocus?

(event: StepperFocusEvent) => void

The event handler that will be fired when a Step is focused.

orientation?

"horizontal" | "vertical"

Specifies the orientation of the Stepper (see example).

The possible values are:

  • (Default) horizontal
  • vertical

style?

React.CSSProperties

Sets additional CSS styles to the Stepper.

successIcon?

string

Specifies a custom icon that will be rendered inside the step for valid steps.

successSVGIcon?

SVGIcon

Specifies a custom SVG icon that will be rendered inside the step for valid steps.

value

number

Specifies the index of the selected Step.

In this article

Not finding the help you need?

Contact Support