components

Stepper (code)

Steppers let a user know what their current position is in a series of steps.

Current: A One
A Two
A One-Two
Three
Four

import { Stepper } from '@mediahuis/chameleon-react'

<Stepper steps={['A One', 'A Two', 'A One-Two', 'Three', 'Four']} />

<Stepper steps={['A One', 'A Two', 'A One-Two', 'Three', 'Four']} />

Props

Name	Type	Default	Required	Description
accessibilityLabelActive	String	'Current: '	-	The label provided to screen readers when a step is active (e.g. Current: Login).
accessibilityLabelCompleted	String	'Completed: '	-	The label provided to screen readers when a step is completed (e.g. Completed: Login).
activeStepIndex	Number	0	-	The index of the active step.
steps	Array<String>	[]	-	The labels of the shown steps.

System Props

m, mb, ml, mr, mt, mx, my

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Steps

default: []

The strings passed in this array will be the title of the Stepper's steps.

Current: A One
A Two
A One-Two
Three
Four

<Stepper steps={['A One', 'A Two', 'A One-Two', 'Three', 'Four']} />

<Stepper steps={['A One', 'A Two', 'A One-Two', 'Three', 'Four']} />

Active Step Index

default: 0

To visually advance to a next step, you can increase the passed in activeStepIndex.

Current: A One
A Two
A One-Two
Three
Four

() => {
  const [currentStep, setCurrentStep] = React.useState(0);

  return (
    <React.Fragment>
      <Stepper
        steps={['A One', 'A Two', 'A One-Two', 'Three', 'Four']}
        activeStepIndex={currentStep}
        mb={3}
      />
      <Button
        mr={3}
        onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
      >
        Previous
      </Button>
      <Button onClick={() => setCurrentStep(Math.min(4, currentStep + 1))}>
        Next
      </Button>
    </React.Fragment>
  );
};

() => {
  const [currentStep, setCurrentStep] = React.useState(0);
  return (
    <React.Fragment>
      <Stepper
        steps={['A One', 'A Two', 'A One-Two', 'Three', 'Four']}
        activeStepIndex={currentStep}
        mb={3}
      />
      <Button
        mr={3}
        onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
      >
        Previous
      </Button>
      <Button onClick={() => setCurrentStep(Math.min(4, currentStep + 1))}>
        Next
      </Button>
    </React.Fragment>
  );
};