ContextQMD
Back to Woocommerce

README

packages/js/components/src/stepper/README.md

10.8.0-dev1.2 KB
Original Source

Stepper

A stepper component to indicate progress in a set number of steps.

Usage

jsx
const steps = [
	{
		key: 'first',
		label: 'First',
		description: 'Step item description',
		content: <div>First step content.</div>,
	},
	{
		key: 'second',
		label: 'Second',
		description: 'Step item description',
		content: <div>Second step content.</div>,
	},
];

<Stepper
	steps={ steps }
	currentStep="first"
	isPending={ true }
/>

Props

NameTypeDefaultDescription
classNameStringnullAdditional class name to style the component
currentStepStringnull(required) The current step's key
stepsArraynull(required) An array of steps used
isVerticalBooleanfalseIf the stepper is vertical instead of horizontal
isPendingBooleanfalseOptionally mark the current step as pending to show a spinner

steps structure

Array of step objects with properties:

  • key: String - Key used to identify step.
  • label: String - Label displayed in stepper.
  • description: String - Description displayed beneath the label.
  • isComplete: Boolean - Optionally mark a step complete regardless of step index.
  • content: ReactNode - Content displayed when the step is active.