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. |