New to KendoReact? Start 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

Example:

jsx

<Stepper animationDuration={400} />

children?

any

Represents the child elements passed to the Stepper.

Example:

jsx

<Stepper>
  <Step label="Step 1" />
  <Step label="Step 2" />
</Stepper>

className?

string

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

Example:

jsx

<Stepper className="custom-stepper" />

dir?

string

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

Example:

jsx

<Stepper dir="rtl" />

disabled?

boolean

Disables the entire Stepper.

Default:

false

Example:

jsx

<Stepper disabled />

errorIcon?

string

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

Example:

jsx

<Stepper errorIcon="k-icon k-i-warning" />

errorSVGIcon?

SVGIcon

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

Example:

jsx

import { gearIcon } from '@progress/kendo-svg-icons';

<Stepper errorSVGIcon={gearIcon} />

item?

ComponentType<StepProps>

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

Example:

jsx

const CustomStep = (props) => <div>{props.label}</div>;
<Stepper item={CustomStep} />

items

StepProps[]

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

Example:

jsx

<Stepper items={[{ label: 'Step 1' }, { label: 'Step 2' }]} />

linear?

boolean

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

Default:

false

Example:

jsx

<Stepper linear />

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

Example:

jsx

<Stepper mode="labels" />

onChange?

(event: StepperChangeEvent) => void

Fires when the value is changed.

Parameters:eventStepperChangeEvent

Example:

jsx

<Stepper onChange={(event) => console.log(event.value)} />

onFocus?

(event: StepperFocusEvent) => void

Fires when a step is focused.

Parameters:eventStepperFocusEvent

Example:

jsx

<Stepper onFocus={(event) => console.log(event.step)} />

orientation?

"vertical" | "horizontal"

Specifies the Stepper orientation (see example).

The possible values are:

(Default) horizontal
vertical

Default:

horizontal

Example:

jsx

<Stepper orientation="vertical" />

selectOnFocus?

boolean

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

Default:

false

Example:

jsx

<Stepper selectOnFocus />

style?

CSSProperties

Sets additional CSS styles to the Stepper.

Example:

jsx

<Stepper style={{ backgroundColor: 'lightblue' }} />

successIcon?

string

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

Example:

jsx

<Stepper successIcon="k-icon k-i-check" />

successSVGIcon?

SVGIcon

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

Example:

jsx

import { gearIcon } from '@progress/kendo-svg-icons';

<Stepper successSVGIcon={gearIcon} />

value

number

Specifies the index of the selected step.

Example:

jsx

<Stepper value={1} />

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.