Horizontaal uitgelijnd

Introductie

Voor het horizontaal uitlijnen van de invoervelden en labels binnen het formulier.

Snelstart

    
    @use "@minvws/manon/components/form";
@use "@minvws/manon/components/form-horizontal";

/* Optional */
@use "@minvws/manon/components/form-horizontal-fieldset";

Voorbeelden

Voorbeeld: Basis

    
    <form action="" method="post" class="horizontal">
  <div class="form-group">
    <label for="form-example-1">Voorbeeld text input</label>
    <input id="form-example-1" name="form-example-1" type="text" />
  </div>
  <button type="submit">Verzend</button>
</form>

Voorbeeld: `fieldset`

    
    <form action="" method="post" class="horizontal">
  <fieldset>
    <legend>Fieldset test</legend>
    <div>
      <label for="form-example-2">Voorbeeld text input</label>
      <input id="form-example-2" name="form-example-2" type="text" />
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

Aandachtspunten

Een fieldset is een groep met bij elkaar horende formuliervragen. Groepeer deze vragen binnen een fieldset met in de legend een omschrijvende naam.

Fieldsets kunnen geen gebruik maken van flex-box. Hierdoor hebben fieldset andere styling nodig dan de overige elementen. Voeg het .scss bestand: form-horizontal-fieldset.scss toe aan het project om gebruik te maken van fieldsets en een horizontaal weergegeven formulier.