Verplichte velden

Introductie

Verplichte velden worden in een formulier duidelijk gemarkeerd zodat de gebruiker weet welke informatie minimaal ingevuld moet worden. Dit helpt om onvolledige inzendingen te voorkomen en zorgt voor een betere gegevenskwaliteit.

Als de meeste velden binnen het formulier verplicht zijn, kan de uitzondering “dit veld is niet verplicht” als toevoeging krijgen. Door de uitzondering te markeren in plaats van alle verplichte velden wordt onnodige herhaling voorkomen.

Snelstart

SCSS importeren:

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

Voorbeelden

Voorbeeld: Invoerveld verplicht

Ipsum

Dit veld is verplicht

Verzend

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

Aandachtspunten: 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.