Nijmegen Component Library
You are viewing version 3 of the library, the latest version is

Stepper 

<!-- Stepper Form Content -->
<form id="stepper-form" action="/" method="post">

    <!-- Stepper Mobile Step Summary -->
    <div class="stepper-mobile-summary">
        Stap <span class="current-step">1</span> van <span class="step-count">6</span>
    </div>

    <!-- Stepper Steps -->
    <ul class="stepper-horizontal stepper-steps">

        <!-- First Step -->
        <li class="step active" id="step-1">
            <!-- Step Button -->
            <a class="step-link" href="#step-content-1">
                <span class="circle">1</span>
                <span class="sr-only step-status"></span>
                <span class="label">Eerste stap</span>
            </a>

            <!-- Step Content -->
            <div class="step-content" id="step-content-1">
                <div class="col-md-12">
                    <h3 class="font-weight-bold pl-0 my-4"><strong>Basis informatie</strong></h3>
                    <div class="form-group md-form">
                        <input id="email" type="email" required="required" class="form-control validate" placeholder="Email">
                        <label for="email" data-error="error">Email</label>
                    </div>
                    <div class="form-group md-form">
                        <input id="username" type="text" required="required" class="form-control validate" placeholder="Gebruikersnaam">
                        <label for="username" data-error="required">Gebruikersnaam</label>
                    </div>
                    <button class="btn btn-primary nextBtn float-right" type="button">Volgende</button>
                </div>
            </div>

        </li>

        <!-- Second Step -->
        <li class="disabled" id="step-2">

            <!-- Step Button -->
            <a class="step-link" href="#step-content-2">
                <span class="circle">2</span>
                <span class="sr-only step-status"></span>
                <span class="label">Stap 2</span>
            </a>

            <!-- Step Content -->
            <div class="step-content" id="step-content-2">
                <div class="col-md-12">
                    <h3 class="font-weight-bold pl-0 my-4"><strong>Persoonlijke data</strong></h3>
                    <div class="form-group md-form">
                        <input id="firstName" type="text" required="required" class="form-control validate" placeholder="Voornaam">
                        <label for="firstName" data-error="required">Voornaam</label>
                    </div>
                    <div class="form-group md-form mt-3">
                        <input id="secondName" type="text" required="required" class="form-control validate" placeholder="Achternaam">
                        <label for="secondName" data-error="required">Achternaam</label>
                    </div>
                    <button class="btn btn-primary backBtn float-left" type="button">Vorige</button>
                    <button class="btn btn-primary nextBtn float-right" type="button">Volgende</button>
                </div>
            </div>

        </li>

        <!-- Third Step -->
        <li class="disabled" id="step-3">

            <!-- Step Button -->
            <a class="step-link" href="#step-content-3">
                <span class="circle">3</span>
                <span class="sr-only step-status"></span>
                <span class="label">Stap 3</span>
            </a>

            <!-- Step Content -->
            <div class="step-content" id="step-content-3">
                <div class="col-md-12">
                    <h3 class="font-weight-bold pl-0 my-4"><strong>Stap 3</strong></h3>
                    <div class="form-group md-form">
                        <input id="step3" type="text" required="required" class="form-control validate" placeholder="Stap 3 invoer">
                        <label for="step3" data-error="required">Stap 3 invoer</label>
                    </div>
                    <button class="btn btn-primary backBtn float-left" type="button">Vorige</button>
                    <button class="btn btn-primary nextBtn float-right" type="button">Volgende</button>
                </div>
            </div>

        </li>

        <!-- Fourth Step -->
        <li class="disabled" id="step-4">

            <!-- Step Button -->
            <a class="step-link" href="#step-content-4">
                <span class="circle">4</span>
                <span class="sr-only step-status"></span>
                <span class="label">Stap 4</span>
            </a>

            <!-- Step Content -->
            <div class="step-content" id="step-content-4">
                <div class="col-md-12">
                    <h3 class="font-weight-bold pl-0 my-4"><strong>Stap 4</strong></h3>
                    <div class="form-group md-form">
                        <input id="step4" type="text" required="required" class="form-control validate" placeholder="Stap 4 invoer">
                        <label for="step4" data-error="required">Stap 4 invoer</label>
                    </div>
                    <button class="btn btn-primary backBtn float-left" type="button">Vorige</button>
                    <button class="btn btn-primary nextBtn float-right" type="button">Volgende</button>
                </div>
            </div>

        </li>

        <!-- Fifth Step -->
        <li class="disabled" id="step-5">

            <!-- Step Button -->
            <a class="step-link" href="#step-content-5">
                <span class="circle">5</span>
                <span class="sr-only step-status"></span>
                <span class="label">Stap 5</span>
            </a>

            <!-- Step Content -->
            <div class="step-content" id="step-content-5">
                <div class="col-md-12">
                    <h3 class="font-weight-bold pl-0 my-4"><strong>Stap 5</strong></h3>
                    <div class="form-group md-form">
                        <input id="step5" type="text" required="required" class="form-control validate" placeholder="Stap 5 invoer">
                        <label for="step5" data-error="required">Stap 5 invoer</label>
                    </div>
                    <button class="btn btn-primary backBtn float-left" type="button">Vorige</button>
                    <button class="btn btn-primary nextBtn float-right" type="button">Volgende</button>

                    <!-- A submit button could be used at any point and will get triggered on step progression -->
                    <!-- <button class="btn btn-primary nextBtn float-right" type="submit">Submit</button> -->
                </div>
            </div>

        </li>

        <!-- Sixth Step -->
        <li class="disabled" id="step-6">

            <!-- Step Button -->
            <a class="step-link" href="#step-content-6">
                <span class="circle">6</span>
                <span class="sr-only step-status"></span>
                <span class="label">Laatste stap</span>
            </a>

            <!-- Step Content -->
            <div class="step-content" id="step-content-6">
                <div class="col-md-12">
                    <h3 class="font-weight-bold pl-0 my-4"><strong>Voltooid</strong></h3>
                    <h4 class="text-center font-weight-bold my-4">Registratie compleet!</h4>
                </div>
            </div>
        </li>

    </ul>

    <!-- Stepper Mobile Navigation -->
    <div class="stepper-mobile-navigation">
        <a class="back-link float-left" href="#" aria-label="Vorige">
            <span aria-hidden="true" class="mdi mdi-chevron-left"></span>
            <span>Vorige</span>
        </a>
        <a class="next-link float-right" href="#" aria-label="Volgende">
            <span>Volgende</span>
            <span aria-hidden="true" class="mdi mdi-chevron-right"></span>
        </a>
    </div>

</form>

Stepper

Based on the version from MDB:
https://mdbootstrap.comcomponents/bootstrap-steps-stepper/

And, Google’s Material design:
https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps

Accessibility

Make sure that the step bar has the right text in the span identified by by the class step-status. This helps screenreader users to hear on which step they are. For the current step we expect the tab to have the text “Actieve stap”, and when the step is completed “Voltooide stap”.

Using

The stepper is designed to work with up to six steps and should appear only once per page.

The stepper allows both forward and backward progression once each step is valid.

Back buttons should only be included on the steps that need it. For instance, not step 1.

The step labels and form input can be changed freely to suit your needs.

The stepper uses a horizontal view on large width screen, vertical view on medium width screens and mobile view on small width screens.

As shown (commented out) within step 5 of the example, a submit button could be used at any point and will get triggered on step progression:

<button class="btn btn-primary nextBtn float-right" type="submit">Submit</button>

The submit button will post the form inputs, and could appear on any step.

Notes

  • When renaming the id, href, aria-controls and/or aria-labelledby for your use-case, be sure to rename all occurrences
  • In the list with steps, each step has its own span indentified by the class step-status telling the status of the step
    • For completed steps, we use the text “Voltooide stap”
    • For the current step, we use the text “Actieve stap”
  • The titles in this component are rendered via h3 elements, choose your own heading according the structure of the page.