StepperProps

Represents the props of the KendoReact Stepper component.

Name	Type	Default	Description
animationDuration?	number | boolean		Sets the duration of the Stepper animation in milliseconds. Defaults to 400ms. jsx <Stepper animationDuration={400} />
children?	any		Represents the children elements passed to the Stepper. 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. jsx <Stepper className="custom-stepper" />
dir?	string		Represents the dir HTML attribute, used to switch between LTR and RTL. jsx <Stepper dir="rtl" />
disabled?	boolean		Disables the entire Stepper. jsx <Stepper disabled />
errorIcon?	string		Specifies a custom icon rendered inside the step for invalid steps. jsx <Stepper errorIcon="k-icon k-i-warning" />
errorSVGIcon?	SVGIcon		Specifies a custom SVG icon rendered inside the step for invalid steps. jsx import { gearIcon } from '@progress/kendo-svg-icons'; <Stepper errorSVGIcon={gearIcon} />
item?	React.ComponentType<StepProps>		Overrides the default component responsible for rendering a single step (see example). jsx const CustomStep = (props) => <div>{props.label}</div>; <Stepper item={CustomStep} />
items	StepProps[]		The collection of steps rendered in the Stepper (see example). jsx <Stepper items={[{ label: 'Step 1' }, { label: 'Step 2' }]} />
linear?	boolean		Specifies whether the Stepper enforces a linear flow (see example). jsx <Stepper linear />
mode?	"steps" | "labels"		Specifies the display mode of the Stepper (see example). The possible values are: (Default) steps—Renders step indicators and optional labels. labels—Renders labels only. jsx <Stepper mode="labels" />
onChange?	(event: StepperChangeEvent) => void		Fires when the value is changed. jsx <Stepper onChange={(event) => console.log(event.value)} />
onFocus?	(event: StepperFocusEvent) => void		Fires when a step is focused. jsx <Stepper onFocus={(event) => console.log(event.step)} />
orientation?	"vertical" | "horizontal"		Specifies the orientation of the Stepper (see example). The possible values are: (Default) horizontal vertical jsx <Stepper orientation="vertical" />
selectOnFocus?	boolean		Indicates whether the selection will change upon focus change or require additional action (Enter or Space key press) to select the focused step. Defaults to false. jsx <Stepper selectOnFocus />
style?	React.CSSProperties		Sets additional CSS styles to the Stepper. jsx <Stepper style={{ backgroundColor: 'lightblue' }} />
successIcon?	string		Specifies a custom icon rendered inside the step for valid steps. jsx <Stepper successIcon="k-icon k-i-check" />
successSVGIcon?	SVGIcon		Specifies a custom SVG icon rendered inside the step for valid steps. jsx import { gearIcon } from '@progress/kendo-svg-icons'; <Stepper successSVGIcon={gearIcon} />
value	number		Specifies the index of the selected step. jsx <Stepper value={1} />