Stepper – Code

Common Examples

import { Stepper } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Stepper>
      <Stepper.List>
        <Stepper.Step id="t1" controls="p1">
          First Step
        </Stepper.Step>
        <Stepper.Step id="t2" controls="p2">
          Second Step
        </Stepper.Step>
      </Stepper.List>
      <Stepper.Panel id="p1">{/* panel content */}</Stepper.Panel>
      <Stepper.Panel id="p2">{/* panel content */}</Stepper.Panel>
      <Flex gap="3" justifyContent="flex-end">
        <Stepper.PrevButton />
        <Stepper.NextButton />
      </Flex>
    </Stepper>
  );
}

Adding stepper content

Content can be added to the Stepper by using Stepper.Panel. The id on a Stepper.Panel must match with the controls on its associated Stepper.Step to ensure proper functionality and display of the content.Content can be added to the end of the Stepper by using Stepper.FinalPanel.

Preventing step on stepper next button

In some cases, validation or other asynchronous functionality needs to occur before the user progresses to the next step.To prevent the Stepper.NextButton from going to the next step on click, return either false or a Promise that resolves false to the onClick prop.

<Stepper
  allowNavigateToPrevStep={false}
  defaultIndex={0}
  onChange={(data) => console.log(data.currentStepId, data.currentStepIndex)}
  onComplete={() => console.log("Completed")}
>
  <Stepper.List>...</Stepper.List>
  <Stepper.Panel>...</Stepper.Panel>
</Stepper>

`Stepper` Props

In addition to the props listed below, the Stepper component can accept any valid HTML div props.

allowNavigateToPrevStep

boolean

Allows the user to navigate to previous steps by clicking the step.

defaultIndex

number

The index of the step to display on mount (0-based). To start the Stepper in the completed state with Stepper.FinalPanel visible and all steps marked complete, set this to the total number of steps (e.g. steps.length).

onChange

(data) => void

The data object has two values: currentStepId and currentStepIndex

onComplete

() => void

<Stepper.List>
  <Stepper.Step id="t1" controls="p1">
    First Step
  </Stepper.Step>
</Stepper.List>

`Stepper.List` Props

The Stepper.List component can accept any valid HTML div props.

<Stepper.Panel id="p1">Panel content</Stepper.Panel>

`Stepper.Panel` Props

The Stepper.Panel component can accept any valid HTML div props.

<Stepper.FinalPanel>Final panel content</Stepper.FinalPanel>

`Stepper.FinalPanel` Props

The Stepper.FinalPanel component can accept any valid HTML div props.

<Stepper.PrevButton appearance="secondary" size="medium" onClick={() => {}} />

`Stepper.PrevButton` Props

The Stepper.PrevButton component accepts any props that the Button component accepts, except for label.

<Stepper.NextButton
  appearance="primary"
  size="medium"
  nextLabel="Skip"
  completeLabel="Finish"
  onClick={(e) => {
    // Return false or Promise<false> to prevent advancing
    return false;
  }}
/>

`Stepper.NextButton` Props

The Stepper.NextButton component accepts any props that the Button component accepts, except for label, and with an enhanced onClick prop:

completeLabel

string

default:"Complete"

Custom label for the complete button on the final step.

nextLabel

string

default:"Next"

Custom label for the next button.

onClick

(e: MouseEvent) => void | boolean | Promise<boolean>

If the onClick handler returns false or a Promise that resolves to false, the stepper will not advance.

​Common Examples

​Adding stepper content

​Preventing step on stepper next button

​Stepper Props

​Stepper.List Props

​Stepper.Panel Props

​Stepper.FinalPanel Props

​Stepper.PrevButton Props

​Stepper.NextButton Props