# Stepper
Controls and displays steps in a multi-step user flow.

**Material documentation:**
[Steppers](https://material.io/archive/guidelines/components/steppers.html)

**Selector:**
og-stepper

**Use:**
`<og-stepper></og-stepper>`

## Module
```javascript
import { StepperModule } from '@opensesame/opensesameui';
```

## Types
```javascript
import { StepperProps } from '@opensesame/opensesameui';
import { StepperClasses } from '@opensesame/opensesameui';
```

## Props
Name | Type | Default | Description
---- | ---- | ------- | -----------
activeStep | number &#124; string | 0 | The active step.
alternativeLabel | boolean &#124; string | false | If `true`, the label will be under the step icon instead of next to it.
classes | object | | Override or extend the styles applied to the component.
className | string | | Class(es) applied to the component.
nonLinear | boolean &#124; string | false | Indicates if the step flow is non-linear.
orientation | 'horizontal' &#124; 'vertical' | 'horizontal' |

## Classes
Rule name | Class | Description
--------- | ----- | -----------
root | .og-stepper-root | Styles applied to the root element.
alternativeLabel | .og-stepper-alternative-label | Styles applied if `[alternativeLabel]="true"`.
horizontal | .og-stepper-horizontal | Styles applied if `orientation="horizontal"`.
vertical | .og-stepper-vertical | Styles applied if `orientation="vertical"`.