@spark-web/stepper

---

title: Stepper

Example

<Stepper label="New finance application" activeIndex={2}>
  <Step heading="Product details" />
  <Step heading="Contact details" />
  <Step heading="Confirm your eligibility" />
  <Step heading="Household details" />
  <Step heading="Payment details" />
</Stepper>

Props

Stepper

Prop	Type	Default	Description
activeIndex	number		Sets the index of the active step.
children	Array<ReactElement<StepProps>>		Children elements to be rendered within the component. Expected to be Step.
data?	DataAttributeMap		Sets data attributes on the component.
label?	string		Describes the purpose of the navigation to users of assistive technology.

Step

Prop	Type	Default	Description
children	ReactNode		Children elements to be rendered within the component.
data?	DataAttributeMap		Sets data attributes on the component.
status?	"active" | "waiting" | "declined"		Status of the step (when active).
heading	string		Heading of the step.
secondaryHeading?	string		Secondary heading of the step.