Developer mode
Opens components on the React tab by default.
Your bookmarks

Wizard

Also known as Steps

Nudges users to complete several steps.

import Box from "@kiwicom/orbit-components/lib/Box";
import Button from "@kiwicom/orbit-components/lib/Button";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
import Wizard from "@kiwicom/orbit-components/lib/Wizard";
import WizardStep from "@kiwicom/orbit-components/lib/WizardStep";
() => {
  const [activeStep, setActiveStep] = React.useState(2)
  const [headingAndText, setHeadingAndText] = React.useState({
    heading: "Ticket fare",
    text: "Select your ticket fare.",
  })

  const handleStepChange = (step) => {
    setActiveStep(step)

    switch (step) {
      case 0:
        setHeadingAndText({
          heading: "Search",
          text: "Find a connection.",
        })
        break

      case 1:
        setHeadingAndText({
          heading: "Passenger details",
          text: "Enter details for all passengers.",
        })
        break

      case 2:
        setHeadingAndText({
          heading: "Ticket fare",
          text: "Select your ticket fare.",
        })
        break

      case 3:
        setHeadingAndText({
          heading: "Customize your trip",
          text: "Select seating.",
        })
        break

      default:
        setHeadingAndText({
          heading: "Overview and payment",
          text: "Enter payment details.",
        })
    }
  }

  return (
    <>
      <Wizard
        id="wizard"
        completedSteps={activeStep}
        activeStep={activeStep}
        onChangeStep={(step) => handleStepChange(step)}
      >
        <WizardStep title="Search" />
        <WizardStep title="Passenger details" />
        <WizardStep title="Ticket fare" />
        <WizardStep title="Customize your trip" />
        <WizardStep title="Overview and payment" />
      </Wizard>
      <Box
        padding={{
          top: "XLarge",
        }}
      >
        <Stack>
          <Heading>{headingAndText.heading}</Heading>
          <Text>{headingAndText.text}</Text>
          {activeStep < 4 && (
            <Button onClick={() => handleStepChange(activeStep + 1)}>
              Next step
            </Button>
          )}
        </Stack>
      </Box>
    </>
  )
}

When to use

  • You have a larger task (such as setting up an account) broken into steps.
  • Users need to complete information in each of the steps.
  • You want to nudge the user to complete the remaining steps.

When not to use

  • The process is out of the user’s control and involves status updates—use a timeline.

Content structure

Completed steps: show steps the users has completed with the option to return; step title: sets the context for each step; active step: shows the step the user is currently in; remaining steps: show steps the user has yet to complete (without current access).

Behavior

Make it clear how to progress

Wizards offers options for going back to completed steps. But the wizard itself has no option for moving forward.

Make it clear in the rest of the screen how users can continue in the task. Use primary buttons to draw attention to the main action to get them to the next step.

Content

Keep progress even

Manage user expectations by keeping it clear what’s been done and what is left to do. Reduce anxiety by showing their progress and continuing forward smoothly.

Break the process into approximately equal steps so that each step advances the user about the same amount toward the end.

Component status

Figma
Designing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released