# Steps · MIAN

Progress through a multi-step flow, horizontal or vertical.

- Id: `steps` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/steps
- Use for: checkout steps, wizard progress, multi-step form, stepper.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-steps`: On an <ol>.
- `mn-step`: A step. data-state="complete" or aria-current="step".
- `mn-step-title · mn-step-desc`: Text.
- `mn-steps-vertical`: Vertical layout.

## Accessibility

- aria-current="step" marks the current step. Add visually hidden "completed" text to finished steps if the tick alone carries the meaning.

## Examples

### Horizontal

```html
<ol class="mn-steps">
  <li class="mn-step" data-state="complete"><span class="mn-step-title">Account</span></li>
  <li class="mn-step" data-state="complete"><span class="mn-step-title">Shipping</span></li>
  <li class="mn-step" aria-current="step"><span class="mn-step-title">Payment</span></li>
  <li class="mn-step"><span class="mn-step-title">Review</span></li>
</ol>
```

### Vertical

```html
<ol class="mn-steps mn-steps-vertical">
  <li class="mn-step" data-state="complete"><div><span class="mn-step-title">Create project</span><span class="mn-step-desc">Done in 2 minutes</span></div></li>
  <li class="mn-step" aria-current="step"><div><span class="mn-step-title">Invite your team</span><span class="mn-step-desc">Add people by email</span></div></li>
  <li class="mn-step"><div><span class="mn-step-title">Go live</span><span class="mn-step-desc">Connect a domain</span></div></li>
</ol>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/steps/source