Stepper

Stepper convey progress through numbered steps. It provides a wizard-like workflow.

<Stepper
  steps={[
    { label: 'Who' },
    { label: 'Recognize' },
    { label: 'Message' },
    { label: 'Review & Submit' },
  ]}
  activeStep={1}
/>

Props

Prop	Type	Default	Description
activeStep	integer	0	Set the active step (zero based index). Set to -1 to disable all the steps.
steps	Array< object >	[]	Array of step objects to be displayed
onStepClick	func		Callback fired when a completed step is clicked
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
connector	element	<StepConnector />	If set the Stepper will not assist in controlling steps for linear flow.
sx	Array<func\| object>\| func\| object	false	The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

Examples

<Stepper
  steps={[
    { label: 'step 1', id: '1' },
    { label: 'step 2', id: '2' },
    { label: 'step 3', id: '3' },
  ]}
  activeStep={0}
  onStepClick={(step, index) => console.log(step, index)}
/>

() => {
  const [activeStep, setActiveStep] = React.useState(2);
  return (
    <Stepper
      steps={[
        { label: 'Who', id: '0' },
        { label: 'Recognize', id: '1' },
        { label: 'Message', id: '2' },
        { label: 'Review & Submit', id: '3' },
      ]}
      activeStep={activeStep}
      onStepClick={(step, index) => setActiveStep(index)}
    />
  );
};

() => {
  const [activeStep, setActiveStep] = React.useState(4);
  return (
    <Stepper
      steps={[
        { label: 'Who', id: '0' },
        { label: 'Recognize', id: '1' },
        { label: 'Message', id: '2' },
        { label: 'Upload', id: '3' },
        { label: 'Review & Submit', id: '4' },
      ]}
      activeStep={activeStep}
      onStepClick={(step, index) => setActiveStep(index)}
    />
  );
};