DSO Component Library

Voorbeeld 

<form class="form-inline">
    <fieldset class="form-fields">
        <legend class="sr-only">Inline formulier</legend>
        <div class="form-group input text">
            <label for="naam">Naam:</label>
            <input type="text" id="naam" class="form-control" />
        </div>
        <div class="form-group input email">
            <label for="email">E-mailadres:</label>
            <input type="email" id="email" class="form-control" />
        </div>
        <div class="form-group static">
            <label>Beveiligd</label>
            <p class="form-control-static">Ja</p>
        </div>
    </fieldset>
    <div class="form-buttons">
        <button type="submit" class="btn btn-primary">
    Verstuur herinnering
</button>

    </div>
</form>
 
<form class="form-inline">
  <fieldset class="form-fields">
    <legend class="sr-only">Inline formulier</legend>
    {{#each groups }}
      {{> (concat '@inline-group-' type) }}
    {{/each}}
  </fieldset>
  <div class="form-buttons">
    {{render '@button' submitButton merge=true }}
  </div>
</form>
 
groups:
  - id: naam
    type: input
    inputType: text
    label: Naam
  - id: email
    type: input
    inputType: email
    label: E-mailadres
  - id: secure
    type: static
    label: Beveiligd
    value: Ja
submitButton:
  modifier: primary
  label: Verstuur herinnering
  type: submit

Een inline formulier is een verticaal formulier met een .form-inline op de form.

Alle onderdelen van een inline formulier staan in een fieldset. Eventueel kan de legend verborgen worden met .sr-only.

Om het formulier nog compacter te maken, is het mogelijk het label te verbergen met .sr-only. Als het label element ongewenst is, is een alternatief @aria-label of @title op de input