DSO Toolkit | Component Library

Form: Sections 

<form class="dso-sections">
    <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>
 
<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 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
formModifier: dso-sections

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: