# @equinor/fusion-react-stepper
[](https://www.npmjs.com/package/@equinor/fusion-react-stepper)
# Stepper
## Properties/Attributes
### for stepper
Name | Type | Default | Description
------------------------- |-------------------------------| ----------------------------- | -----------
`initialStepKey` | `string / undefined` | `/` | Sets the initial step key for an uncontrolled stepper component. If undefined the stepper will use the first step as initial step.
`stepKey` | `string / undefined` | `/` | Used for making the stepper a controlled component. If it is set then it is the property that decides the currentStep and initialStepKey is ignored.
`forceOrder` | `boolean` | `false` | Can't skip steps. Steps will have specific order.
`verticalSteps` | `boolean` | `false` | Change stepper layout to vertical. Vertical positioning of steps.
`hideNavButtons` | `boolean` | `false` | Show/hide next and previous navigation buttons for stepper.
`onChange` | `(stepKey: string, allSteps: StepKey[]) => void` | | onChange event for active step.
### for step
Name | Type | Default | Description
------------------------- | ----------------------------- | ----------------------------- | -----------
`stepKey` | `string` | `/` | Step key of step. Used for ***activeStepKey***. `required`
`title` | `string` | `/` | Title of step
`description` | `string` | `/` | Description of step
`disabled` | `boolean` | `false` | Disable step. Can't be clicked, but can manually navigate to it
## Example Usage
### Uncontrolled usage
```tsx
import { Stepper } from '@equinor/fusion-react-stepper';
console.log('active: ', e, ' keys: ', k)} props>
Step content 1
Step content 2
Step content 3
```
### Controlled usage
```tsx
import { Stepper } from '@equinor/fusion-react-stepper';
const [activeStep, setActiveStep] = useState('step1');
const onChangeStep = (stepKey: string, allSteps: StepKey[]) => {
console.log('active: ', stepKey, ' keys: ', allSteps)
if (activeStep !== stepKey) {
setActiveStep(String(stepKey));
}
};
return (
Step content 1
Step content 2
Step content 3
);
```