DSO Toolkit | Component Library

Form: Multi Page 

<form class="dso-multi-page">
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Formulier met meerdere pagina&#x27;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-link">
            <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>
 
<form{{#if formModifier }} class="{{ formModifier }}"{{/if}}>
  <fieldset class="dso-form-fields">
    <legend class="sr-only">{{ formLegend }}</legend>
    {{#each fieldsets }}
      <fieldset>
        <legend{{#if legendScreenreaderOnly }} class="sr-only"{{/if}}>{{ legend }}</legend>
        {{#each groups }}
          {{> (concat '@group-' inputType) }}
        {{/each}}
      </fieldset>
    {{/each}}
  </fieldset>
  {{#if buttons.length }}
    <div class="dso-form-buttons">
      {{#each buttons }}
        {{> '@button' }}
      {{/each}}
    </div>
  {{/if}}
</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: link
    label: Vorige stap
    icon: angle-left
  - type: button
    modifier: link
    label: Secondaire actie
  - type: submit
    modifier: primary
    label: Volgende stap
    iconAfter: angle-right
formModifier: dso-multi-page

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 op een form of .form ingezet.

Extra: