import Wizard, { WizardStep } from "@kiwicom/orbit-components/lib/Wizard";
<Wizard id="wizard" completedSteps={3} activeStep={3} onChangeStep={() => {}}>
<WizardStep title="Search" />
<WizardStep title="Passenger details" />
<WizardStep title="Ticket fare" />
<WizardStep title="Customize your trip" />
<WizardStep title="Overview & Payment" />

Wizard props

activeStepnumberZero-based index marking the current Wizard step. Should be lower than or equal to the value of completedSteps.
childrenReact.ChildrenArray<React.Element<WizardStepComponent>>WizardStep elements.
completedStepsnumberNumber of completed steps, ranging from 0 to total number of steps.
onChangeStep(stepIndex: number) => void \| Promise<any>Function which handles when a Wizard step is clicked. It’s called with the step index, so you can use it to change activeStep.
lockScrollingbooleantrueWhether to prevent scrolling of the rest of the page while Modal is open. This is on by default to provide a better user experience.
directionrow \| columnrowAllows to use column direction on desktop
dataTeststringOptional prop for testing purposes.
labelClosestring"Close"Property for passing translation string to close Button title
labelProgressReact.NodeProperty for passing translation string to progress text

WizardStep props

titlestringName of the step.
onClickevent => void \| Promise<any>Function which handles click event.
isCompletedbooleanMarks current step as completed.