Stepper: React
Steppers let a user know what their current position is in a series of steps.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Stepper } from '@mediahuis/chameleon-react';
export default function Example() {
return <Stepper steps={['step1', 'step2', 'step3']} />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
accessibilityLabelActive | String | 'Current: ' | No | The label that will be read by screen readers when a step is active. |
accessibilityLabelCompleted | String | 'Completed: ' | No | The label that will be read by screen readers when a step is completed. |
activeStepIndex | Number | 0 | No | The index of the currently active step. |
steps | Unknown | [] | Yes | An array containing the labels of all the steps to be shown. |