Wizard

Wizard

When to use this component

Use the wizard component:

  • To split up a complex problem or task into multiple steps or multiple subtasks, for example, a configuration wizard.
  • To guide users through a process that consists of multiple steps or multiple subtasks, for example, a checkout process.

When not to use this component

Do not use the wizard component when the main goal is collecting user input and when a single or short form can be used. In this case, use the form component instead.

Do not use the wizard component when the steps or subtasks can only be presented using form components and no other elements. In this case, use the form component instead.

How it works

The wizard form component is a collection of form components that each collect certain user input.

Layout

The wizard shows the steps of the wizard above the container where the form components are loaded and where the current step is presented.

Validation

The validation of user input in the form components in each step of a wizard works as it does for simple or short forms. See the documentation of the form component.

{% extends '@form' %}

{% block content %}
  {% render '@form-steps' %}

  <h2>Active step</h2>
  {{ parent() }}
{% endblock %}
<nav class="form-steps" aria-labelledby="form-steps-73">
      <h2 id="form-steps-73" class="visually-hidden">Steps in this wizard</h2>
      <ol class="form-steps-list">
          <li class="completed"><a href="#"><span>first step</span></a></li>
          <li class="completed"><a href="#"><span>second step</span></a></li>
          <li class="active"><span><span>active step</span></span></li>
          <li class=""><a href="#"><span>Step with a long name</span></a></li>
          <li class=""><span><span>inactive fifth step</span></span></li>
          <li class=""><span><span>inactive sixth step</span></span></li>
          <li class=""><span><span>inactive seventh step</span></span></li>
      </ol>
  </nav>

  <h2>Active step</h2>
  <form action="#" method="#">

      <p class="form-disclaimer">All fields are required, unless they are marked as optional.</p>

      <fieldset>
          <legend>Contact details</legend>
          <div class="form-item ">
              <label for="default-name_id">Name
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-name_id" name="default-name_name" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-firstname_id">First name
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-firstname_id" name="default-firstname_name" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-email_id">E-mail address
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="email" id="default-email_id" name="default-email_name" class="email" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-tel_id">Phone number
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="tel" id="default-tel_id" name="default-tel_name" class="tel" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
      </fieldset>

      <fieldset class="form-item ">
          <legend>
              Date
          </legend>
          <div class="form-columns">
              <div class="form-item-column">
                  <div class="radio">

                      <input type="radio" id="input---default-radio-1" name="default-radiogroup" class="radio" />
                      <label for="input---default-radio-1">Wednesday 6 june 2018</label>
                  </div>
                  <div class="radio">

                      <input type="radio" id="input---default-radio-2" name="default-radiogroup" class="radio" />
                      <label for="input---default-radio-2">Thursday 7 june 2018</label>
                  </div>
                  <div class="radio">

                      <input type="radio" id="input---default-radio-3" name="default-radiogroup" class="radio" />
                      <label for="input---default-radio-3">Friday 8 june 2018</label>
                  </div>
              </div>
              <div class="form-item-column">

              </div>
          </div>
      </fieldset>

      <fieldset>
          <legend>Form row</legend>
          <div class='form-row'>
              <div class="form-item  error stacked">
                  <label for="default-postal-code_id">Postal code
                  </label>
                  <div class="field-message " id="default-postal-code_id-description">
                      Wrap form items in a .form-row element.
                      <div class="accolade "></div>
                  </div>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-postal-code_id" aria-describedby="default-postal-code_id-message" name="default-postal-code_name" class="text error" aria-invalid="true" />
                      </div>
                      <div class="form-item-column">
                          <div class="field-message error" role="alert" id="default-postal-code_id-message">
                              Almost there!
                              <div class="accolade "></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="form-item  success stacked">
                  <label for="default-municipality_id">Municipality
                  </label>
                  <div class="field-message " id="default-municipality_id-description">
                      Place modifier .stacked on the form-items.
                      <div class="accolade "></div>
                  </div>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-municipality_id" aria-describedby="default-municipality_id-message" name="default-municipality_name" class="text success" />
                      </div>
                      <div class="form-item-column">
                          <div class="field-message success" role="alert" id="default-municipality_id-message">
                              Very good!
                              <div class="accolade "></div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </fieldset>

      <fieldset>
          <legend>Another fieldset</legend>
          <div class="form-item  error">
              <label for="default-textfield_id">Label textfield
                  <span class="label-optional">
                      (Optional)
                  </span>
              </label>
              <div class="field-message " id="default-textfield_id-description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium.
                  <div class="accolade "></div>
              </div>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-textfield_id" aria-describedby="default-textfield_id-message" name="default-textfield_name" class="text error" aria-invalid="true" />
                  </div>
                  <div class="form-item-column">
                      <div class="field-message error" role="alert" id="default-textfield_id-message">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
                          <div class="accolade "></div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-textfield_id--1">Label textfield
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-textfield_id--1" name="default-textfield_name--1" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>

          <fieldset>
              <legend>Nested fieldset</legend>
              <div class="form-item ">
                  <label for="default-textfield_id--2">Label textfield
                  </label>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-textfield_id--2" name="default-textfield_name--2" class="text" />
                      </div>
                      <div class="form-item-column">
                      </div>
                  </div>
              </div>
              <div class="form-item ">
                  <label for="default-textfield_id--3">Label textfield
                  </label>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-textfield_id--3" name="default-textfield_name--3" class="text" />
                      </div>
                      <div class="form-item-column">
                      </div>
                  </div>
              </div>
          </fieldset>
      </fieldset>

      <fieldset class="form-item ">
          <legend>
              Newsletter
          </legend>

          <div class="form-columns">
              <div class="form-item-column">
                  <div class="checkbox">

                      <input type="checkbox" id="input-default-newsletter_id--default-checkbox-1" name="default-checkboxgroup" class="checkbox" />
                      <label for="input-default-newsletter_id--default-checkbox-1">Subscribe to the newsletter</label>
                  </div>
              </div>
              <div class="form-item-column">

              </div>
          </div>
      </fieldset>

      <section class="file-upload">
          <div class="form-item">
              <label for="default-file--">Attachment
              </label>
              <div class="form-columns">
                  <div class="form-item-column">
                      <div class="file" data-file="No file chosen.">

                          <input type="file" id="default-file--" aria-describedby="default-file---description" name="--default-file--" />

                          <span id="default-file---description" class="file__button">Select your files here to upload</span>
                      </div>

                      <span class="help-text">Info about size and extension (optional)</span>
                  </div>
                  <div class="form-item-column"></div>
              </div>
          </div>
      </section>

      <div class="form-actions">

      </div>

  </form>
/* No context defined for this component. */