MultiStep

The MultiStep component indicates a user's position within a Form with multiple steps, and is positioned above the form content.

For more information on how to use the features and props for this component, check out the developer documentation.

The MultiStep component accepts a list of steps and the currentId of the active step. Each step in a MultiStep must have content for the Form as well as actions, which include the usage of Buttons that will navigate through the steps or cancel/submit the Form. Only the current step will display its name. All other steps will display their name within a Tooltip as the user hovers over them. MultiStep components can be configured to allow users to navigate or skip steps by clicking on the step marker by passing an onClick handler.

This component also supports the use of sub-steps. These steps may be related to the previous step somehow, and will appear smaller than other steps. To create a sub-step, simply pass depth of 1 to that step. Regular steps have a default depth of 0.

NameTypeDefaultDescription
currentId*stringSets the current step.
steps*Step[]Flat array of objects describing each step.
classNamestringAdditional CSS classes.
refRef<HTMLDivElement>Ref for the wrapping element.