@progress/kendo-react-layout

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { StepProps } from './StepProps'; import { StepperChangeEvent } from './StepperChangeEvent'; import { StepperFocusEvent } from './StepperFocusEvent'; import { SVGIcon, WebMcpProps } from '@progress/kendo-react-common'; import * as React from 'react'; /** * Represents the props of the [KendoReact Stepper component](https://www.telerik.com/kendo-react-ui/components/layout/stepper). */ export interface StepperProps { /** * Sets the Stepper animation duration in milliseconds. * * @default 400 * * @example * ```jsx * <Stepper animationDuration={400} /> * ``` */ animationDuration?: boolean | number; /** * Represents the child elements passed to the Stepper. * * @example * ```jsx * <Stepper> * <Step label="Step 1" /> * <Step label="Step 2" /> * </Stepper> * ``` */ children?: any; /** * Specifies a list of CSS classes that will be added to the Stepper. * * @example * ```jsx * <Stepper className="custom-stepper" /> * ``` */ className?: string; /** * Represents the `dir` HTML attribute, used to switch between LTR and RTL. * * @example * ```jsx * <Stepper dir="rtl" /> * ``` */ dir?: string; /** * Disables the entire Stepper. * * @default false * * @example * ```jsx * <Stepper disabled /> * ``` */ disabled?: boolean; /** * Specifies a custom icon rendered inside the step for invalid steps. * * @example * ```jsx * <Stepper errorIcon="k-icon k-i-warning" /> * ``` */ errorIcon?: string; /** * Specifies a custom SVG icon rendered inside the step for invalid steps. * * @example * ```jsx * import { gearIcon } from '@progress/kendo-svg-icons'; * * <Stepper errorSVGIcon={gearIcon} /> * ``` */ errorSVGIcon?: SVGIcon; /** * Overrides the default component responsible for rendering a single step ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/custom_rendering)). * * @example * ```jsx * const CustomStep = (props) => <div>{props.label}</div>; * <Stepper item={CustomStep} /> * ``` */ item?: React.ComponentType<StepProps>; /** * The collection of steps rendered in the Stepper ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper)). * * @example * ```jsx * <Stepper items={[{ label: 'Step 1' }, { label: 'Step 2' }]} /> * ``` */ items: Array<StepProps>; /** * Specifies whether the Stepper enforces a linear flow ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/linear_mode)). * * @default false * * @example * ```jsx * <Stepper linear /> * ``` */ linear?: boolean; /** * Specifies the Stepper display mode ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)). * * The possible values are: * * (Default) `steps`—Renders step indicators and optional labels. * * `labels`—Renders labels only. * * @default steps * * @example * ```jsx * <Stepper mode="labels" /> * ``` */ mode?: 'steps' | 'labels'; /** * Specifies the Stepper orientation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/orientation)). * * The possible values are: * * (Default) `horizontal` * * `vertical` * * @default horizontal * * @example * ```jsx * <Stepper orientation="vertical" /> * ``` */ orientation?: 'horizontal' | 'vertical'; /** * 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 /> * ``` */ selectOnFocus?: boolean; /** * Sets additional CSS styles to the Stepper. * * @example * ```jsx * <Stepper style={{ backgroundColor: 'lightblue' }} /> * ``` */ style?: React.CSSProperties; /** * Specifies a custom icon rendered inside the step for valid steps. * * @example * ```jsx * <Stepper successIcon="k-icon k-i-check" /> * ``` */ successIcon?: string; /** * Specifies a custom SVG icon rendered inside the step for valid steps. * * @example * ```jsx * import { gearIcon } from '@progress/kendo-svg-icons'; * * <Stepper successSVGIcon={gearIcon} /> * ``` */ successSVGIcon?: SVGIcon; /** * Specifies the index of the selected step. * * @example * ```jsx * <Stepper value={1} /> * ``` */ value: number; /** * Fires when the value is changed. * * @example * ```jsx * <Stepper onChange={(event) => console.log(event.value)} /> * ``` */ onChange?: (event: StepperChangeEvent) => void; /** * Fires when a step is focused. * * @example * ```jsx * <Stepper onFocus={(event) => console.log(event.step)} /> * ``` */ onFocus?: (event: StepperFocusEvent) => void; /** * 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`. */ webMcp?: boolean | WebMcpProps; }