Weergave in kolommen

Introductie

Voor het weergeven van de inhoud van het formulier in kolommen.

Snelstart

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

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

Voorbeelden

Voorbeeld: Basis

    
    <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>

Voorbeeld: verplicht

    
    <form action="" method="post">
  <div class="column-2">
    <div>
      <label for="voorbeeld-1-date-1-start">van</label>
      <div>
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start" required />
      </div>
    </div>
    <div>
      <label for="voorbeeld-1-date-1-end">tot</label>
      <div>
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-end" name="voorbeeld-1-date-3-end" required />
      </div>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

Voorbeeld: met hulptekst

    
    <form action="" method="post" class="help">
  <div class="column-2">
    <div>
      <label for="voorbeeld-1-date-1-start">van</label>
      <div class="help-container">
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start" required />
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Voorbeeld text input"
          data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
          id="voorbeeld-text-input-met-hulptekst-simpel-1-message"
        >
          Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
    <div>
      <label for="voorbeeld-1-date-1-end">tot</label>
      <div class="help-container">
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-end" name="voorbeeld-1-date-3-end" required />
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Voorbeeld text input"
          data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
          id="voorbeeld-text-input-met-hulptekst-simpel-1-message"
        >
          Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

Voorbeeld: met gedeelde hulptekst

    
    <form action="" method="post" class="help">
  <div class="column-2">
    <div>
      <label for="voorbeeld-1-date-1-start">van</label>
      <div class="help-container">
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start" required />
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Voorbeeld text input"
          data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
          id="voorbeeld-text-input-met-hulptekst-simpel-1-message"
        >
          Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
    <div>
      <label for="voorbeeld-1-date-1-end">tot</label>
      <div class="help-container">
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-end" name="voorbeeld-1-date-3-end" required />
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Voorbeeld text input"
          data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
          id="voorbeeld-text-input-met-hulptekst-simpel-1-message"
        >
          Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

Voorbeeld: verplicht met hulptekst

    
    <form action="" method="post" class="help">
  <div class="column-2">
    <div>
      <label for="voorbeeld-1-date-1-start">van</label>
      <div class="help-container">
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start" required />
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Voorbeeld text input"
          data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
          id="voorbeeld-text-input-met-hulptekst-simpel-1-message"
        >
          Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
    <div>
      <label for="voorbeeld-1-date-1-end">tot</label>
      <div class="help-container">
        <span class="nota-bene">Dit veld is verplicht</span>
        <input id="voorbeeld-1-date-1-end" name="voorbeeld-1-date-3-end" required />
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Voorbeeld text input"
          data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
          id="voorbeeld-text-input-met-hulptekst-simpel-1-message"
        >
          Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>