# Step
A step in a multi step flow

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

**Selector:**
og-step

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

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

## Types
```javascript
import { StepProps } from '@opensesame/opensesameui';
import { StepClasses } from '@opensesame/opensesameui';
```

## Props
Name | Type | Default | Description
---- | ---- | ------- | -----------
active | boolean &#124; string | false | Is this the active step?
classes | object | | Override or extend the styles applied to the component.
className | string | | Class(es) applied to the component.
completed | boolean &#124; string | false | Is the step completed?
disabled | boolean &#124; string | false | If `true`, the step will be disabled.
expanded | boolean &#124; string | false | If `true`, the step will be expanded.

## Classes
Rule name | Class | Description
--------- | ----- | -----------
root | .og-step-root | Styles applied to the root element.
alternativeLabel | .og-step-alternative-label | Styles applied if the parent stepper has `[alternativeLabel]="true"`.
completed | .og-step-completed | Pseudo class applied if the step is completed.
horizontal | .og-step-horizontal | Styles applied if stepper is horizontal.
vertical | .og-step-vertical | Styles applied if stepper is vertical.