DSO Component Library

Form 

<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="fas fa-calendar form-control-feedback" aria-hidden="true"></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="" value="" />
                        <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">
                            Verwijder document
                        </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>
                        <span class="di di-warning" aria-hidden="true"></span>
                        <button type="button" class="btn btn-link dso-remove">
                            Verwijder document
                        </button>
                    </li>
                </ul>
                <div class="alert alert-warning">
                    <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>

                <!-- 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">
                        <span class="icon fa fa-plus"></span>
                        Document toevoegen
                    </label>
                </div>

                <!-- Or to trigger the upload using a button element (not recommended) -->
                <!--
              <button type="button" class="btn btn-link" >
                  <span class="icon fa fa-plus" aria-hidden="true"></span>
                Document toevoegen
              </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">
                        Blieft u een toelichting?
                    </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
                        </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
                        </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="submit" class="btn btn-primary">
            Verstuur
        </button>
    </div>
</form>
 
<form{{#if formModifier }} class="{{ formModifier }}"{{/if}}>
  <fieldset class="dso-form-fields">
    <legend class="sr-only">{{ formLegend }}</legend>
    {{#each fieldsets }}
      <fieldset>
        <legend>{{ legend }}</legend>
        {{#each groups }}
          {{> (concat '@group-' inputType) }}
        {{/each}}
      </fieldset>
    {{/each}}
  </fieldset>
  <div class="dso-form-buttons">
    {{> '@button' submitButton }}
  </div>
</form>
 
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: fas fa-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: Blieft u een toelichting?
        options:
          - value: 1
            label: ja
            checked: true
            infoOpen: null
            infoText: |
              Empty
          - value: 2
            label: nee
        infoOpen: null
        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: null
            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>
submitButton:
  type: submit
  modifier: primary
  label: Verstuur

Een formulier begint altijd met een form element. 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.

Extra: