Implementation
Stepper Props
Stepper.List Props
Stepper.Panel Props
Stepper.FinalPanel Props
Stepper.PrevButton Props
Stepper.NextButton Props
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.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.Allows the user to navigate to previous steps by clicking the step.
The data object has two values: currentStepId and currentStepIndex
<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 component accepts any props that the Button component accepts, except for label.<Stepper.NextButton
appearance="primary"
size="medium"
onClick={(e) => {
// Return false or Promise<false> to prevent advancing
return false;
}}
/>
Stepper.NextButton component accepts any props that the Button component accepts, except for label, and with an enhanced onClick prop: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.
Last modified on January 23, 2026
