Skip to main content

Step

Individual step within a Stepper. Must be used as a child of Stepper.

Storybook documentation (opens in new tab)

Step Label

This is the step content

<Stepper showLabels>
  <Step label="Current Step">
    <Text>This is the step content</Text>
  </Step>
  <Step label="Next Step">
    <Text>Next step content</Text>
  </Step>
</Stepper>

Props​

Label​

The label prop sets the step title shown in the indicator and card header. You can show the labels under the step icon by adding the showLabels prop to the Stepper component.

Custom Step Label

The label appears in both the step indicator and the card header.

<Step label="Account Setup">
  <Text>Step content</Text>
</Step>

Skippable​

Use the skippable prop to add a Skip button.

Required Step

This step cannot be skipped.

<Stepper>
  <Step label="Required">...</Step>
  <Step label="Optional" skippable>...</Step>
  <Step label="Final">...</Step>
</Stepper>

Accessibility​

  • Step panel has role="tabpanel" with aria-label
  • Back button disabled on first step with proper disabled attribute
  • Next button changes to "Finish" on last step
  • All buttons have descriptive aria-label attributes