Form

Een formulier begint altijd met een form-element. Als een form-element ongewenst is kan een element met de class .form worden ingezet. Elke textuele input en select zit in een .form-group. Elk formulier onderdeel is een groep met een label.

Alle elementen zitten in een fieldset met een legend. De legend kan verborgen worden met een .sr-only. De form submit (en eventueel een form reset) staat buiten de fieldset.

  • Een eventuele toelichting zit in een p.dso-help-block. Als er een toelichting is, dient deze met een @aria-describedby aan de input gekoppeld te worden.
  • Een label bij een textuele input of select eindigt altijd met een dubbele punt.

Buttons worden uitgelijnd afhankelijk van de context:

  • Buttons worden gesorteerd op belangrijkheid van rechts naar links, met de primaire actie aan de rechterkant. Wanneer knoppen gebruikt worden om door een reeks schermen te navigeren, wordt de primaire knop rechts uitgelijnd en de ‘terug’ actie helemaal links om de navigatie visueel te ondersteunen.
  • Uitgezonderd zijn formulieren met één pagina en gerichte taken, buttons links uitlijnen en sorteren op belangrijkheid van links naar rechts.

De uitzonderingen worden met de modifier .dso-single-page ingezet (op het bovenliggende form of .form, of op .dso-form-buttons zelf).

Extra:

<!-- Form Vertical -->
<form>
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Vertical Form</legend>

        <fieldset>
            <legend>Contact</legend>

            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="voornaam" class="control-label">
                        Voornaam
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="voornaam" class="form-control" required>

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="achternaam" class="control-label">
                        Achternaam
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="achternaam" class="form-control">

                    <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>

                </div>

            </div>

            <div class="form-group dso-static">
                <div class="dso-label-container">
                    <label class="control-label">Geslacht</label>

                </div>
                <div class="dso-field-container">
                    <p>Man</p>
                </div>

            </div>

            <div class="form-group dso-input dso-input-text has-feedback">
                <div class="dso-label-container">
                    <label for="geboortedatum" class="control-label">
                        Geboortedatum
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="geboortedatum" class="form-control">

                    <span class="form-control-feedback" aria-hidden="true"><svg class="di di-calendar">
                            <use href="../../dso-icons.svg#calendar" />
                        </svg></span>

                </div>

            </div>

            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="email" class="control-label">
                        E-mailadres
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="email" class="form-control" required>

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="password" class="control-label">
                        Wachtwoord
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="password" class="form-control">

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="password_bevestig" class="control-label">
                        Wachtwoord (bevestig)
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="password_bevestig" class="form-control">

                </div>

            </div>

            <div class="form-group dso-confirm">
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="checkbox" id="nieuwsbrief" name="nieuwsbrief">
                        <label for="nieuwsbrief">
                            Stuur mij de maandelijkse nieuwsbrief
                        </label>
                    </div>

                    <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>

                </div>
            </div>

        </fieldset>

        <fieldset>
            <legend>Bijlagen</legend>

            <div class="form-group dso-files">
                <div class="dso-description dso-rich-content">
                    Geef een tekening van de nieuwe situatie in 1:100. Een situatietekening geeft een schets van de bestaande en de nieuwe situatie met daarop duidelijk de maatvoering en de schaalaanduiding (1:100).
                </div>
                <ul class="dso-filelist">

                    <li>
                        <div class="dso-filename">
                            Schetsen_en_foto’s_1.pdf
                        </div>
                        <div class="dso-confidential dso-selectable">
                            <input type="checkbox" id="input-confirm-0" name="" value="" />
                            <label for="input-confirm-0">
                                Vertrouwelijk
                            </label>
                        </div>

                        <button type="button" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
                    </li>

                    <li>
                        <div class="dso-filename">
                            Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
                        </div>
                        <div class="dso-confidential dso-selectable">
                            <input type="checkbox" id="input-confirm-1" name="" value="" checked />
                            <label for="input-confirm-1">
                                Vertrouwelijk
                            </label>
                        </div>
                        <svg class="di di-status-warning">
                            <use href="../../dso-icons.svg#status-warning" />
                        </svg>
                        <button type="button" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
                    </li>

                </ul>

                <div class="alert alert-warning" role="alert">

                    <div class="dso-rich-content">
                        <p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
                        <ol>
                            <li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
                            <li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
                        </ol>
                        <p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
                    </div>

                </div>

                <!-- To use an input type="file" element -->
                <div class="dso-file-upload">
                    <input type="file" id="file-upload" />
                    <label class="btn btn-link" for="file-upload">
                        <svg class="di di-plus">
                            <use href="../../dso-icons.svg#plus" />
                        </svg><span>Document toevoegen</span>
                    </label>
                </div>

                <!-- Or to trigger the upload using a button element (not recommended) -->
                <!--
    <button type="button"
  class="btn btn-link"><svg class="di di-plus">
  <use href="../../dso-icons.svg#plus" />
</svg><span >Document toevoegen</span></button>

  -->
            </div>

        </fieldset>

        <fieldset>
            <legend>Beleg</legend>

            <div class="form-group dso-select dso-multiple">
                <div class="dso-label-container">
                    <label for="beleg" class="control-label">
                        Beleg
                    </label>

                </div>
                <div class="dso-field-container">
                    <select id="beleg" class="form-control" multiple>

                        <optgroup label="Vlees">

                            <option value="worst">Worst</option>

                            <option value="salami">Salami</option>

                            <option value="geit">Geit</option>

                        </optgroup>

                        <optgroup label="Vis">

                            <option value="zalm">Zalm</option>

                            <option value="makreel">Makreel</option>

                        </optgroup>

                    </select>

                </div>

            </div>

        </fieldset>

        <fieldset>
            <legend>Auto merk</legend>

            <div class="form-group dso-select">
                <div class="dso-label-container">
                    <label for="auto_merk" class="control-label">
                        Type auto
                    </label>

                </div>
                <div class="dso-field-container">
                    <select id="auto_merk" class="form-control">

                        <optgroup label="Europees">

                            <option value="alfa">Alfa Romeo</option>

                            <option value="fiat">Fiat</option>

                            <option value="mercedes" selected>Mercedes</option>

                            <option value="volkswagen">Volkswagen</option>

                        </optgroup>

                    </select>

                </div>

            </div>

        </fieldset>

        <fieldset>
            <legend>Aanhanger</legend>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Welke aanhanger
                    </label>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-0" name="aanhanger" value="bak">
                        <label for="aanhanger-0">
                            Bak
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-1" name="aanhanger" value="caravan" checked>
                        <label for="aanhanger-1">
                            Caravan
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-2" name="aanhanger" value="fietsendrager">
                        <label for="aanhanger-2">
                            Fietsendrager
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-3" name="aanhanger" value="oplegger">
                        <label for="aanhanger-3">
                            Oplegger
                        </label>

                    </div>

                </div>

            </fieldset>

        </fieldset>

        <fieldset>
            <legend>Vraag</legend>

            <div class="form-group dso-textarea">
                <div class="dso-label-container">
                    <label for="gekke_vraag" class="control-label">
                        Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?
                    </label>

                </div>
                <div class="dso-field-container">
                    <textarea class="form-control" id="gekke_vraag" rows="5"></textarea>

                    <p class="dso-help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p>

                </div>

            </div>

        </fieldset>

        <fieldset>
            <legend>Vraag met infobutton</legend>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?
                    </label>

                    <button type="button" class="btn dso-info-button">
                        <span class="sr-only">
                            Toelichting
                        </span>
                    </button>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-0" name="input-radio-infobutton" value="1" checked>
                        <label for="input-radio-infobutton-0">
                            ja, de vraagstelling aan duidelijkheid te wensen over, ik wil graag een toelichting hierop
                        </label>

                        <button type="button" class="btn dso-info-button">
                            <span class="sr-only">
                                Toelichting
                            </span>
                        </button>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-1" name="input-radio-infobutton" value="2">
                        <label for="input-radio-infobutton-1">
                            nee, het is mij duidelijk
                        </label>

                    </div>

                </div>

            </fieldset>

        </fieldset>

        <fieldset>
            <legend>Vraag met infobutton uitgeklapt</legend>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Toelichting op uw vraag
                    </label>

                    <button type="button" class="btn dso-info-button dso-open">
                        <span class="sr-only">
                            Toelichting
                        </span>
                    </button>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-open-0" name="input-radio-infobutton-open" value="1" checked>
                        <label for="input-radio-infobutton-open-0">
                            ja
                        </label>

                        <button type="button" class="btn dso-info-button">
                            <span class="sr-only">
                                Toelichting
                            </span>
                        </button>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-open-1" name="input-radio-infobutton-open" value="2">
                        <label for="input-radio-infobutton-open-1">
                            nee
                        </label>

                    </div>

                </div>

                <div class="dso-info">
                    <button type="button">
                        <span class="sr-only">Sluiten</span>
                    </button>
                    <div class="dso-rich-content">
                        <h4>Let op</h4>
                        <p>Bij verticale formulieren wordt het bij checkboxen en radio's onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>

                    </div>
                </div>

            </fieldset>

        </fieldset>

    </fieldset>

    <div class="dso-form-buttons">

        <button type="button" class="btn btn-link"><span>Annuleren</span></button>

        <button type="submit" class="btn btn-primary"><span>Verstuur</span></button>

    </div>

</form>
<!-- Form Horizontal -->
<form class="form-horizontal">
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Form Horizontal</legend>

        <fieldset>
            <legend>Contact</legend>

            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="voornaam" class="control-label">
                        Voornaam
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="voornaam" class="form-control" required>

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="achternaam" class="control-label">
                        Achternaam
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="achternaam" class="form-control">

                    <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>

                </div>

            </div>

            <div class="form-group dso-static">
                <div class="dso-label-container">
                    <label class="control-label">Geslacht</label>

                </div>
                <div class="dso-field-container">
                    <p>Man</p>
                </div>

            </div>

            <div class="form-group dso-input dso-input-text has-feedback">
                <div class="dso-label-container">
                    <label for="geboortedatum" class="control-label">
                        Geboortedatum
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="geboortedatum" class="form-control">

                    <span class="form-control-feedback" aria-hidden="true"><svg class="di di-calendar">
                            <use href="../../dso-icons.svg#calendar" />
                        </svg></span>

                </div>

            </div>

            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="email" class="control-label">
                        E-mailadres
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="email" class="form-control" required>

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="password" class="control-label">
                        Wachtwoord
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="password" class="form-control">

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="password_bevestig" class="control-label">
                        Wachtwoord (bevestig)
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="password_bevestig" class="form-control">

                </div>

            </div>

            <div class="form-group dso-confirm">
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="checkbox" id="nieuwsbrief" name="nieuwsbrief">
                        <label for="nieuwsbrief">
                            Stuur mij de maandelijkse nieuwsbrief
                        </label>
                    </div>

                    <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>

                </div>
            </div>

        </fieldset>

        <fieldset>
            <legend>Bijlagen</legend>

            <div class="form-group dso-files">
                <div class="dso-description dso-rich-content">
                    Geef een tekening van de nieuwe situatie in 1:100. Een situatietekening geeft een schets van de bestaande en de nieuwe situatie met daarop duidelijk de maatvoering en de schaalaanduiding (1:100).
                </div>
                <ul class="dso-filelist">

                    <li>
                        <div class="dso-filename">
                            Schetsen_en_foto’s_1.pdf
                        </div>
                        <div class="dso-confidential dso-selectable">
                            <input type="checkbox" id="input-confirm-0" name="" value="" />
                            <label for="input-confirm-0">
                                Vertrouwelijk
                            </label>
                        </div>

                        <button type="button" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
                    </li>

                    <li>
                        <div class="dso-filename">
                            Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
                        </div>
                        <div class="dso-confidential dso-selectable">
                            <input type="checkbox" id="input-confirm-1" name="" value="" checked />
                            <label for="input-confirm-1">
                                Vertrouwelijk
                            </label>
                        </div>
                        <svg class="di di-status-warning">
                            <use href="../../dso-icons.svg#status-warning" />
                        </svg>
                        <button type="button" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
                    </li>

                </ul>

                <div class="alert alert-warning" role="alert">

                    <div class="dso-rich-content">
                        <p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
                        <ol>
                            <li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
                            <li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
                        </ol>
                        <p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
                    </div>

                </div>

                <!-- To use an input type="file" element -->
                <div class="dso-file-upload">
                    <input type="file" id="file-upload" />
                    <label class="btn btn-link" for="file-upload">
                        <svg class="di di-plus">
                            <use href="../../dso-icons.svg#plus" />
                        </svg><span>Document toevoegen</span>
                    </label>
                </div>

                <!-- Or to trigger the upload using a button element (not recommended) -->
                <!--
    <button type="button"
  class="btn btn-link"><svg class="di di-plus">
  <use href="../../dso-icons.svg#plus" />
</svg><span >Document toevoegen</span></button>

  -->
            </div>

        </fieldset>

        <fieldset>
            <legend>Beleg</legend>

            <div class="form-group dso-select dso-multiple">
                <div class="dso-label-container">
                    <label for="beleg" class="control-label">
                        Beleg
                    </label>

                </div>
                <div class="dso-field-container">
                    <select id="beleg" class="form-control" multiple>

                        <optgroup label="Vlees">

                            <option value="worst">Worst</option>

                            <option value="salami">Salami</option>

                            <option value="geit">Geit</option>

                        </optgroup>

                        <optgroup label="Vis">

                            <option value="zalm">Zalm</option>

                            <option value="makreel">Makreel</option>

                        </optgroup>

                    </select>

                </div>

            </div>

        </fieldset>

        <fieldset>
            <legend>Auto merk</legend>

            <div class="form-group dso-select">
                <div class="dso-label-container">
                    <label for="auto_merk" class="control-label">
                        Type auto
                    </label>

                </div>
                <div class="dso-field-container">
                    <select id="auto_merk" class="form-control">

                        <optgroup label="Europees">

                            <option value="alfa">Alfa Romeo</option>

                            <option value="fiat">Fiat</option>

                            <option value="mercedes" selected>Mercedes</option>

                            <option value="volkswagen">Volkswagen</option>

                        </optgroup>

                    </select>

                </div>

            </div>

        </fieldset>

        <fieldset>
            <legend>Aanhanger</legend>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Welke aanhanger
                    </label>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-0" name="aanhanger" value="bak">
                        <label for="aanhanger-0">
                            Bak
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-1" name="aanhanger" value="caravan" checked>
                        <label for="aanhanger-1">
                            Caravan
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-2" name="aanhanger" value="fietsendrager">
                        <label for="aanhanger-2">
                            Fietsendrager
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-3" name="aanhanger" value="oplegger">
                        <label for="aanhanger-3">
                            Oplegger
                        </label>

                    </div>

                </div>

            </fieldset>

        </fieldset>

        <fieldset>
            <legend>Vraag</legend>

            <div class="form-group dso-textarea">
                <div class="dso-label-container">
                    <label for="gekke_vraag" class="control-label">
                        Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?
                    </label>

                </div>
                <div class="dso-field-container">
                    <textarea class="form-control" id="gekke_vraag" rows="5"></textarea>

                    <p class="dso-help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p>

                </div>

            </div>

        </fieldset>

        <fieldset>
            <legend>Vraag met infobutton</legend>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?
                    </label>

                    <button type="button" class="btn dso-info-button">
                        <span class="sr-only">
                            Toelichting
                        </span>
                    </button>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-0" name="input-radio-infobutton" value="1" checked>
                        <label for="input-radio-infobutton-0">
                            ja, de vraagstelling aan duidelijkheid te wensen over, ik wil graag een toelichting hierop
                        </label>

                        <button type="button" class="btn dso-info-button">
                            <span class="sr-only">
                                Toelichting
                            </span>
                        </button>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-1" name="input-radio-infobutton" value="2">
                        <label for="input-radio-infobutton-1">
                            nee, het is mij duidelijk
                        </label>

                    </div>

                </div>

            </fieldset>

        </fieldset>

        <fieldset>
            <legend>Vraag met infobutton uitgeklapt</legend>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Toelichting op uw vraag
                    </label>

                    <button type="button" class="btn dso-info-button dso-open">
                        <span class="sr-only">
                            Toelichting
                        </span>
                    </button>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-open-0" name="input-radio-infobutton-open" value="1" checked>
                        <label for="input-radio-infobutton-open-0">
                            ja
                        </label>

                        <button type="button" class="btn dso-info-button">
                            <span class="sr-only">
                                Toelichting
                            </span>
                        </button>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-open-1" name="input-radio-infobutton-open" value="2">
                        <label for="input-radio-infobutton-open-1">
                            nee
                        </label>

                    </div>

                </div>

                <div class="dso-info">
                    <button type="button">
                        <span class="sr-only">Sluiten</span>
                    </button>
                    <div class="dso-rich-content">
                        <h4>Let op</h4>
                        <p>Bij verticale formulieren wordt het bij checkboxen en radio's onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>

                    </div>
                </div>

            </fieldset>

        </fieldset>

    </fieldset>

    <div class="dso-form-buttons">

        <button type="button" class="btn btn-link"><span>Annuleren</span></button>

        <button type="submit" class="btn btn-primary"><span>Verstuur</span></button>

    </div>

</form>
<!-- Multi Page -->
<form>
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Formulier met meerdere pagina&#39;s</legend>

        <fieldset>
            <legend>Contact</legend>

            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="voornaam" class="control-label">
                        Voornaam
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="voornaam" class="form-control" required>

                </div>

            </div>

        </fieldset>

    </fieldset>

    <div class="dso-form-buttons">

        <button type="button" class="btn btn-default"><svg class="di di-angle-left">
                <use href="../../dso-icons.svg#angle-left" />
            </svg><span>Vorige stap</span></button>

        <button type="button" class="btn btn-link"><span>Secondaire actie</span></button>

        <button type="submit" class="btn btn-primary"><span>Volgende stap</span><svg class="di di-angle-right">
                <use href="../../dso-icons.svg#angle-right" />
            </svg></button>

    </div>

</form>
<!-- Sections -->
<form>
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Formulier met meerdere secties</legend>

        <fieldset>
            <legend>Contact</legend>

            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="voornaam" class="control-label">
                        Voornaam
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="voornaam" class="form-control" required>

                </div>

            </div>

        </fieldset>

    </fieldset>

    <div class="dso-form-buttons">

        <button type="button" class="btn btn-link"><span>Secondaire actie</span></button>

        <button type="submit" class="btn btn-primary"><span>Primaire actie</span></button>

    </div>

</form>
<!-- Single Page -->
<form class="dso-single-page">
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Een simpel formulier</legend>

        <fieldset>
            <legend>Invoervelden</legend>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="invoer-veld-1" class="control-label">
                        Invoerveld
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="invoer-veld-1" class="form-control">

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="invoer-veld-2" class="control-label">
                        Invoerveld
                    </label>

                </div>
                <div class="dso-field-container">
                    <input type="text" id="invoer-veld-2" class="form-control">

                </div>

            </div>

        </fieldset>

    </fieldset>

    <div class="dso-form-buttons">

        <button type="submit" class="btn btn-primary"><span>Primaire actie</span></button>

        <button type="button" class="btn btn-link"><span>Secondaire actie</span></button>

    </div>

</form>
<form {{ className(formModifier) }}>
  <fieldset class="dso-form-fields">
    <legend class="sr-only">{{ formLegend }}</legend>
    {% for fieldset in fieldsets %}
      <fieldset>
        <legend {{ className([fieldset.legendScreenreaderOnly, 'sr-only']) }}>{{ fieldset.legend }}</legend>
        {% for group in fieldset.groups %}
          {% render '@group-' + group.inputType, group %}
        {% endfor %}
      </fieldset>
    {% endfor %}
  </fieldset>
  {% if buttons %}
    <div class="dso-form-buttons">
      {% for button in buttons %}
        {% render '@button', button %}
      {% endfor %}
    </div>
  {% endif %}
</form>
/* Form Vertical */
__title: form vertical
formLegend: Vertical Form
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        inputType: input
        type: text
        label: Voornaam
        required: true
      - id: achternaam
        inputType: input
        type: text
        label: Achternaam
        helpText: Mag ook de familienaam zijn
      - inputType: static
        label: Geslacht
        value: Man
      - id: geboortedatum
        inputType: input
        type: text
        label: Geboortedatum
        inputIcon: calendar
      - id: email
        inputType: input
        type: text
        label: E-mailadres
        required: true
      - id: password
        inputType: input
        type: text
        label: Wachtwoord
      - id: password_bevestig
        inputType: input
        type: text
        label: Wachtwoord (bevestig)
      - id: nieuwsbrief
        inputType: confirm
        label: Stuur mij de maandelijkse nieuwsbrief
        helpText: Uw gegevens zullen niet worden gedeeld met derden
  - legend: Bijlagen
    groups:
      - id: documenten
        inputType: files
        description: >-
          Geef een tekening van de nieuwe situatie in 1:100. Een
          situatietekening geeft een schets van de bestaande en de nieuwe
          situatie met daarop duidelijk de maatvoering en de schaalaanduiding
          (1:100).
        files:
          - filename: Schetsen_en_foto’s_1.pdf
          - filename: Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
            confidential: true
  - legend: Beleg
    groups:
      - id: beleg
        inputType: select
        label: Beleg
        multiple: true
        options:
          - optionType: Vlees
            items:
              - value: worst
                label: Worst
              - value: salami
                label: Salami
              - value: geit
                label: Geit
          - optionType: Vis
            items:
              - value: zalm
                label: Zalm
              - value: makreel
                label: Makreel
  - legend: Auto merk
    groups:
      - id: auto_merk
        inputType: select
        label: Type auto
        options:
          - optionType: Europees
            items:
              - value: alfa
                label: Alfa Romeo
              - value: fiat
                label: Fiat
              - value: mercedes
                label: Mercedes
                selected: true
              - value: volkswagen
                label: Volkswagen
  - legend: Aanhanger
    groups:
      - id: aanhanger
        inputType: radios
        label: Welke aanhanger
        options:
          - value: bak
            label: Bak
          - value: caravan
            label: Caravan
            checked: true
          - value: fietsendrager
            label: Fietsendrager
          - value: oplegger
            label: Oplegger
  - legend: Vraag
    groups:
      - id: gekke_vraag
        inputType: textarea
        rows: 5
        label: >-
          Waarom heeft een tankstation dat 24 uur per dag open is een slot op de
          deur?
        helpText: Deze vraag heeft een toelichting
  - legend: Vraag met infobutton
    groups:
      - id: input-radio-infobutton
        inputType: radios
        label: >-
          Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u
          een toelichting hierop?
        options:
          - value: 1
            label: >-
              ja, de vraagstelling aan duidelijkheid te wensen over, ik wil
              graag een toelichting hierop
            checked: true
            infoOpen: false
            infoText: |
              Empty
          - value: 2
            label: 'nee, het is mij duidelijk'
        infoOpen: false
        infoText: |
          Empty
  - legend: Vraag met infobutton uitgeklapt
    groups:
      - id: input-radio-infobutton-open
        inputType: radios
        label: Toelichting op uw vraag
        options:
          - value: 1
            label: ja
            checked: true
            infoOpen: false
            infoText: Empty
          - value: 2
            label: nee
        infoOpen: true
        infoText: >
          <h4>Let op</h4>

          <p>Bij verticale formulieren wordt het bij checkboxen en radio's
          onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
buttons:
  - type: button
    modifier: link
    label: Annuleren
  - type: submit
    modifier: primary
    label: Verstuur
/* Form Horizontal */
__title: form horizontal
formLegend: Form Horizontal
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        inputType: input
        type: text
        label: Voornaam
        required: true
      - id: achternaam
        inputType: input
        type: text
        label: Achternaam
        helpText: Mag ook de familienaam zijn
      - inputType: static
        label: Geslacht
        value: Man
      - id: geboortedatum
        inputType: input
        type: text
        label: Geboortedatum
        inputIcon: calendar
      - id: email
        inputType: input
        type: text
        label: E-mailadres
        required: true
      - id: password
        inputType: input
        type: text
        label: Wachtwoord
      - id: password_bevestig
        inputType: input
        type: text
        label: Wachtwoord (bevestig)
      - id: nieuwsbrief
        inputType: confirm
        label: Stuur mij de maandelijkse nieuwsbrief
        helpText: Uw gegevens zullen niet worden gedeeld met derden
  - legend: Bijlagen
    groups:
      - id: documenten
        inputType: files
        description: >-
          Geef een tekening van de nieuwe situatie in 1:100. Een
          situatietekening geeft een schets van de bestaande en de nieuwe
          situatie met daarop duidelijk de maatvoering en de schaalaanduiding
          (1:100).
        files:
          - filename: Schetsen_en_foto’s_1.pdf
          - filename: Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
            confidential: true
  - legend: Beleg
    groups:
      - id: beleg
        inputType: select
        label: Beleg
        multiple: true
        options:
          - optionType: Vlees
            items:
              - value: worst
                label: Worst
              - value: salami
                label: Salami
              - value: geit
                label: Geit
          - optionType: Vis
            items:
              - value: zalm
                label: Zalm
              - value: makreel
                label: Makreel
  - legend: Auto merk
    groups:
      - id: auto_merk
        inputType: select
        label: Type auto
        options:
          - optionType: Europees
            items:
              - value: alfa
                label: Alfa Romeo
              - value: fiat
                label: Fiat
              - value: mercedes
                label: Mercedes
                selected: true
              - value: volkswagen
                label: Volkswagen
  - legend: Aanhanger
    groups:
      - id: aanhanger
        inputType: radios
        label: Welke aanhanger
        options:
          - value: bak
            label: Bak
          - value: caravan
            label: Caravan
            checked: true
          - value: fietsendrager
            label: Fietsendrager
          - value: oplegger
            label: Oplegger
  - legend: Vraag
    groups:
      - id: gekke_vraag
        inputType: textarea
        rows: 5
        label: >-
          Waarom heeft een tankstation dat 24 uur per dag open is een slot op de
          deur?
        helpText: Deze vraag heeft een toelichting
  - legend: Vraag met infobutton
    groups:
      - id: input-radio-infobutton
        inputType: radios
        label: >-
          Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u
          een toelichting hierop?
        options:
          - value: 1
            label: >-
              ja, de vraagstelling aan duidelijkheid te wensen over, ik wil
              graag een toelichting hierop
            checked: true
            infoOpen: false
            infoText: |
              Empty
          - value: 2
            label: 'nee, het is mij duidelijk'
        infoOpen: false
        infoText: |
          Empty
  - legend: Vraag met infobutton uitgeklapt
    groups:
      - id: input-radio-infobutton-open
        inputType: radios
        label: Toelichting op uw vraag
        options:
          - value: 1
            label: ja
            checked: true
            infoOpen: false
            infoText: Empty
          - value: 2
            label: nee
        infoOpen: true
        infoText: >
          <h4>Let op</h4>

          <p>Bij verticale formulieren wordt het bij checkboxen en radio's
          onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
buttons:
  - type: button
    modifier: link
    label: Annuleren
  - type: submit
    modifier: primary
    label: Verstuur
formModifier: form-horizontal
/* Multi Page */
__title: multipage form
formLegend: Formulier met meerdere pagina's
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        inputType: input
        type: text
        label: Voornaam
        required: true
buttons:
  - type: button
    modifier: default
    label: Vorige stap
    icon: angle-left
  - type: button
    modifier: link
    label: Secondaire actie
  - type: submit
    modifier: primary
    label: Volgende stap
    iconAfter: angle-right
/* Sections */
__title: form with sections
formLegend: Formulier met meerdere secties
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        inputType: input
        type: text
        label: Voornaam
        required: true
buttons:
  - type: button
    modifier: link
    label: Secondaire actie
  - type: submit
    modifier: primary
    label: Primaire actie
/* Single Page */
__title: single page form
formLegend: Een simpel formulier
fieldsets:
  - legend: Invoervelden
    groups:
      - id: invoer-veld-1
        inputType: input
        type: text
        label: Invoerveld
      - id: invoer-veld-2
        inputType: input
        type: text
        label: Invoerveld
buttons:
  - type: submit
    modifier: primary
    label: Primaire actie
  - type: button
    modifier: link
    label: Secondaire actie
formModifier: dso-single-page