Weergave in kolommen

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Groepeer de gewenste velden en geef de gewenste hoeveelheid kolommen op. Bijvoorbeeld: class="column-2.

Voorbeelden

Basis

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="column-2">
    <div>
      <label for="voorbeeld-1-date-1-start">van</label>
      <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start" />
    </div>
    <div>
      <label for="voorbeeld-1-date-1-end">tot</label>
      <input id="voorbeeld-1-date-1-end" name="voorbeeld-1-date-3-end" />
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/form-base";

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.

Bijbehorende elementen:

Bekende problemen

  • fieldset met een column-*-class met daarbinnen een <input type="date"> kunnen buiten de breedte van het formulier lopen.