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.