New to KendoReactStart a free 30-day trial

StepperProps

Interface

Represents the props of the KendoReact Stepper component.

Definition

Package:@progress/kendo-react-layout

Properties

animationDuration?

number | boolean

Sets the Stepper animation duration in milliseconds.

Default:

400

Represents the child elements passed to the Stepper.

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

dir?

string

Represents the dir HTML attribute, used to switch between LTR and RTL.

disabled?

boolean

Disables the entire Stepper.

Default:

false

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

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

item?

ComponentType​<StepProps>

Overrides the default component responsible for rendering a single step (see example).

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

linear?

boolean

Specifies whether the Stepper enforces a linear flow (see example).

Default:

false

mode?

"steps" | "labels"

Specifies the Stepper display mode (see example).

The possible values are:

  • (Default) steps—Renders step indicators and optional labels.
  • labels—Renders labels only.
Default:

steps

Fires when the value is changed.

Parameters:eventStepperChangeEvent

onFocus?

(event: StepperFocusEvent) => void

Fires when a step is focused.

Parameters:eventStepperFocusEvent

orientation?

"vertical" | "horizontal"

Specifies the Stepper orientation (see example).

The possible values are:

  • (Default) horizontal
  • vertical
Default:

horizontal

Indicates whether the selection changes upon focus change or requires additional action (Enter or Space key press) to select the focused step.

Default:

false

style?

CSSProperties

Sets additional CSS styles to the Stepper.

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

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

value

number

Specifies the index of the selected step.

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration so AI agents can interact with this Stepper. Set to true to use the provider-level dataName, or pass a config object to override.

Requires a WebMcpProvider ancestor from @progress/kendo-react-webmcp.