Hulpteksten

Introductie

Hulptesksten (extra toelichting) bij een invoerveld geeft de gebruiker duidelijke aanwijzingen en vermindert fouten, maar te veel uitleg kan juist verwarrend werken.

Snelstart

SCSS importeren:

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

JavaScript importeren:

    
    import "@minvws/manon/js/form-help.js";

Benodigde stappen

Voeg de hulptekst toe onder het invoerveld. Hierdoor verspringt het formulier en de locatie waar de gebruiker interactie mee heeft zo min mogelijk. Hulpteksten die boven het invoerveld staan worden niet ingeklapt.
De knop wordt automatisch toegevoegd. Deze hoeft dus niet handmatig in de html opgenomen te worden.
Zonder JavaScript wordt de knop niet toegevoegd en wordt hulptekst getoont zonder deze in te klappen. Dit zorgt ervoor dat de hulpteksten ook beschikbaar zijn voor gebruikers zonder JavaScript.

Voorbeelden

Voorbeeld: Basis

    
    <form action="" method="post" class="help">
  <label for="voorbeeld-text-input-met-hulptekst-simpel-1">Help op simpel formulierveld</label>
  <div class="help-container">
    <input
      id="voorbeeld-text-input-met-hulptekst-simpel-1"
      name="voorbeeld-text-input"
      type="text"
      aria-describedby="voorbeeld-text-input-met-hulptekst-simpel-1-message"
    />
    <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>

  <button type="submit">Verzend</button>
</form>

Voorbeeld: Verplicht invoerveld

    
    <form action="" method="post" class="help">
  <label for="example-input-help-required">Help op simpel formulierveld</label>
  <div class="help-container">
    <span class="nota-bene">Dit veld is verplicht</span>
    <div>
      <input
        id="example-input-help-required"
        name="voorbeeld-text-input"
        type="text"
        aria-describedby="example-input-help-required-message"
        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="example-input-help-required-message"
      >
        Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>

  <button type="submit">Verzend</button>
</form>

Voorbeeld: Kolommen

    
    <form action="" method="post" class="help">
  <div class="help-container">
    <div class="column-2">
      <div>
        <label for="date-range-start">van</label>
        <input id="date-range-start" name="date-range-start" value="DD-MM-JJJJ" type="date" />
      </div>
      <div>
        <label for="date-range-end">tot</label>
        <input id="date-range-end" name="date-range-end" value="DD-MM-JJJJ" type="date" />
      </div>
    </div>
    <p
      class="explanation"
      data-open-label="Toelichting bij het veld: Periode"
      data-close-label="Sluit toelichting bij het veld: Periode"
    >
      <span>toelichting:</span> Vul hier een start- en/of einddatum als volgt in: DD-MM-JJJJ.
    </p>
  </div>
  <button type="submit">Filter</button>
</form>

Voorbeeld: Kolommen verplicht

    
    <form action="" method="post" class="help">
  <div class="help-container">
    <div class="column-2">
      <div>
        <label for="date-range-start">van</label>
        <input id="date-range-start" name="date-range-start" value="DD-MM-JJJJ" type="date" />
      </div>
      <div>
        <label for="date-range-end">tot</label>
        <input id="date-range-end" name="date-range-end" value="DD-MM-JJJJ" type="date" />
      </div>
    </div>
    <p
      class="explanation"
      data-open-label="Toelichting bij het veld: Periode"
      data-close-label="Sluit toelichting bij het veld: Periode"
    >
      <span>toelichting:</span> Vul hier een start- en/of einddatum als volgt in: DD-MM-JJJJ.
    </p>
  </div>
  <button type="submit">Filter</button>
</form>

Voorbeeld: fieldset

    
    <form action="" method="post" class="horizontal help">
  <fieldset>
    <legend>Filter op datum</legend>
    <fieldset class="help-container form-group">
      <legend>Periode</legend>
      <div class="help-container">
        <div class="column-2">
          <div>
            <label for="date-range-start">van</label>
            <input id="date-range-start" name="date-range-start" value="DD-MM-JJJJ" type="date" />
          </div>
          <div>
            <label for="date-range-end">tot</label>
            <input id="date-range-end" name="date-range-end" value="DD-MM-JJJJ" type="date" />
          </div>
        </div>
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Periode"
          data-close-label="Sluit toelichting bij het veld: Periode"
        >
          <span>toelichting:</span> Vul hier een start- en/of einddatum als volgt in: DD-MM-JJJJ.
        </p>
      </div>
    </fieldset>
  </fieldset>
  <button type="submit">Filter</button>
</form>