Nota bene

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Geef op de <input> aan dat het invoerveld verplicht is met het required attribuut.
  3. Voeg een <span> toe boven het inputveld. Het is belangrijk om het bericht boven het invoerveld te plaatsen zodat de volgorde ook klopt voor gebruikers die gebruik maken van hulpmiddelen zoals een screenreader.
  4. Groeppeer de <input> en de <span> samen in een <div> voor de correcte weergave.

Voorbeelden

Nota bene

Visueel voorbeeld:

Dit veld is verplicht

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <label for="nota-bene-input">Ipsum</label>
    <div>
      <span class="nota-bene">Dit veld is verplicht</span>
      <input
        id="nota-bene-input"
        name="nota-bene-input"
        type="text"
      />
    </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

Benodigd

  • text/nota-bene.scss

Optioneel

  • text/nota-bene-variables.scss

Instelbare variabelen

Bijbehorende elementen: