Nota bene

Introductie

“Nota bene” dient om de aandacht van de gebruiker te vestigen op cruciale informatie.

Snelstart

    
      
    
    @use "@minvws/manon/components/nota-bene";
  

Benodigde stappen

1. Geef op de <input> aan dat het invoerveld verplicht is met het required attribuut.
2. 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.
3. Groeppeer de <input> en de <span> samen in een <div> voor de correcte weergave.

Voorbeelden

Losstaande span

Lorem ipsum dolor sit

    
      
    
    <span class="nota-bene">Lorem ipsum dolor sit</span>
  

Bij een invoerveld

Gebruikersnaam

Dit veld is verplicht

Verzend

    
      
    
    <form action="" method="post">
  <div>
    <label for="username">Gebruikersnaam</label>
    <div>
      <span class="nota-bene" id="username-nota-bene">Dit veld is verplicht</span>
      <input
        id="username"
        name="username"
        type="text"
        required
        aria-describedby="username-nota-bene"
      />
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>