# Onboarding checklist · MIAN

The first steps of a new account, with progress, done states and one action per step.

- Id: `onboarding` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/onboarding
- Use for: onboarding checklist, getting started steps, setup progress, first run.

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-tasks`: The list (<ol>).
- `mn-task`: A step: mn-task-check, mn-task-title, mn-task-desc and an optional button. data-done marks it complete.

## Accessibility

- Use an ordered list and say “Done” in text for completed steps (a visually hidden span).
- Put the overall progress in words too (“2 of 4 done”).

## Examples

### Getting started

```html
<div class="mn-card" style="max-width:32rem"><div class="mn-card-header"><div class="mn-row" style="justify-content:space-between"><h3 class="mn-card-title">Set up Ledger</h3><span class="mn-muted mn-small">2 of 4 done</span></div><div class="mn-progress mn-progress-sm" role="progressbar" aria-label="Setup" aria-valuenow="50" style="--_v:50%;margin-top:.5rem"></div></div>
<div class="mn-card-body"><ol class="mn-tasks">
  <li class="mn-task" data-done><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title"><span class="mn-sr-only">Done: </span>Create your workspace</p><p class="mn-task-desc">Named, with your company’s currency.</p></li>
  <li class="mn-task" data-done><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title"><span class="mn-sr-only">Done: </span>Connect a bank account</p><p class="mn-task-desc">Read-only, takes about two minutes.</p></li>
  <li class="mn-task"><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title">Invite your accountant</p><p class="mn-task-desc">They get a free seat.</p><a class="mn-btn mn-btn-sm" href="#">Invite</a></li>
  <li class="mn-task"><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title">Approve your first matches</p><p class="mn-task-desc">Ledger learns from every approval.</p><a class="mn-btn mn-btn-sm mn-btn-outline" href="#">Review</a></li>
</ol></div></div>
```

## Source

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