Use the wizard 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.
The wizard component is a collection of form components that each collect certain user input. It uses the form actions component to let users navigate to the next or previous step in the wizard.
The wizard component has the following layout:
The steps are displayed so that it is clear for the user what is the current, active step, which steps are not active, which steps are enabled or disabled and which steps are clickable. See the example.
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>
<div class="form-item ">
<label for="default-input1_id">Some input field
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input1_id" name="default-input1_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
<div class="form-item ">
<label for="default-input2_id">Some more input
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input2_id" name="default-input2_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
<div class="form-item ">
<label for="default-input3_id">How do you feel about fieldsets?
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input3_id" name="default-input3_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
<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 error">
<legend>
Date
</legend>
<div class="form-item">
<div class="field-message " id="-description">
You can add an optional field description here.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<div class="radio">
<input type="radio" id="input--error-default-radio-1" name="default-radiogroup" class="radio error" />
<label for="input--error-default-radio-1">Wednesday 6 june 2018</label>
</div>
<div class="radio">
<input type="radio" id="input--error-default-radio-2" name="default-radiogroup" class="radio error" />
<label for="input--error-default-radio-2">Thursday 7 june 2018</label>
</div>
<div class="radio">
<input type="radio" id="input--error-default-radio-3" name="default-radiogroup" class="radio error" />
<label for="input--error-default-radio-3">Friday 8 june 2018</label>
</div>
</div>
<div class="form-item-column">
<div class="field-message error" role="alert" id="-validation">
Lorem ipsum dolor sit amet.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Address details</legend>
<div class="form-item ">
<label for="default-street_id">Street
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-street_id" name="default-street_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
<div class='form-row'>
<div class="form-item error stacked">
<label for="number_id">Number
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="number_id" aria-describedby="number_id-message" name="number_name" class="text error" aria-invalid="true" />
</div>
<div class="form-item-column">
<div class="field-message error" role="alert" id="number_id-message">
Lorem ipsum dolor sit amet.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
<div class="form-item stacked">
<label for="mailbox_id">Mailbox
<span class="label-optional">
(Optional)
</span>
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="mailbox_id" name="mailbox_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
</div>
<div class='form-row'>
<div class="form-item stacked">
<label for="postal-code_id">Postal code
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="postal-code_id" name="postal-code_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
<div class="form-item stacked">
<label for="municipality_id">Municipality
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="municipality_id" name="municipality_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
</div>
<div class="form-item ">
<label for="select">Country
</label>
<div class="form-columns">
<div class="form-item-column">
<select name="select" id="select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Another fieldset</legend>
<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>
<legend>And another one</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>
</fieldset>
<fieldset class="form-item ">
<legend>
Newsletter
</legend>
<div class="form-item">
<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>
</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">Allowed file formats: jpg, jpeg, png and gif. Maximum file size: 2 MB. Images must be larger than 744x465 pixels.</span>
</div>
<div class="form-item-column"></div>
</div>
</div>
</section>
<p class=""> <strong>
The City of Ghent treats the personal data you fill in with respect for
your
<a href='#privacy'>
privacy </a>
.
</strong>
</p>
<div class="form-actions">
<input type="submit" value="Submit" class="" />
<button type="button" class="button button-secondary ">
Save for later
</button>
<a href='#' class="standalone-link back">
Cancel </a>
</div>
<div class="privacy-disclaimer" id="privacy">
<h2>With respect for your privacy</h2>
<p class=""> <strong>
The City of Ghent treats the personal data you fill in with respect
for your privacy. For this purpose, we follow the
<a href='https://#'>
General Data Protection Ordinance </a>
.
</strong>
</p>
<h3>For what, with whom and for how long?</h3>
<p class="">This is a short text describing what the personal data entered in the form above are for, with whom they are shared and for how long they are kept. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales nisi in mi fringilla malesuada. Donec sapien nibh, facilisis id enim a, malesuada lacinia magna. Aenean at sagittis ipsum, nec condimentum quam. Etiam interdum convallis justo, eu sodales erat.</p>
<h3>Your rights</h3>
<p class="">This is a short text describing the rights. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales nisi in mi fringilla malesuada. Donec sapien nibh, facilisis id enim a, malesuada lacinia magna. Aenean at sagittis ipsum, nec condimentum quam.</p>
<p class=""> Do you suspect someone is using your personal information illegally? Report it to us at
<a href='mailto:#'>
privacy@stad.gent </a>
.
You also have the right to complain to the
<a href='https://#'>
Flemish Supervisory Commission for the processing of personal data </a>
.
</p>
<p class=""> <a href='#'>
Learn more about your rights and privacy </a>
</p>
</div>
</form>
/* No context defined for this component. */