DSO Component Library

# Wizard

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <nav class="wizard">
        <ul class="nav nav-wizard">
            <li class="done">
                <a href="#">Locatie bepalen</a>
            </li>
            <li class="active">
                <span>Werkzaamheden kiezen</span>
            </li>
            <li class="next">
                <a href="#">Werkzaamheden checken</a>
            </li>
            <li class="disabled">
                <span>Resultaat</span>
            </li>
        </ul>
    </nav>

`
`

    <nav class="wizard">
      <ul class="nav nav-wizard">
        {{#each items }}
          <li class="{{ state }}">
            {{#if (in 'active disabled' state) }}
              <span>{{ label }}</span>
            {{else}}
              <a href="#">{{ label }}</a>
            {{/if}}
          </li>
        {{/each}}
      </ul>
    </nav>

`
`

    items:
      - label: Locatie bepalen
        state: done
      - label: Werkzaamheden kiezen
        state: active
      - label: Werkzaamheden checken
        state: next
      - label: Resultaat
        state: disabled

`

- Handle: @wizard
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\wizard\wizard.hbs
- Referenced by (1): @checken

There are no notes for this item.

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<a href="#">Locatie bepalen</a>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Default`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

`<a href="#">Locatie bepalen</a>`