Notificatie binnen formulier

Introductie

Notificaties binnen een formulier geven gebruikers directe feedback over hun acties, zoals succesmeldingen, waarschuwingen of foutmeldingen. Dit helpt om de interactie duidelijker te maken en fouten tijdens het invullen te voorkomen.

Het weergeven van notificaties binnen het formulier

Snelstart

SCSS importeren:

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

Voorbeelden

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="input-error">Voornaam</label>
  <div>
    <input
      id="input-error"
      class="error"
      aria-describedby="input-error-message"
      aria-invalid="true"
    />
    <p class="error" id="input-error-message">
      <span class="notification-type">
        <span class="icon icon-error" aria-hidden="true"></span>
        Foutmelding:
      </span>
      Het veld mag niet leeggelaten worden. Vul uw voornaam in
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="input-warning">Voornaam</label>
  <div>
    <input
      id="input-warning"
      class="warning"
      aria-describedby="input-warning-message"
      aria-invalid="true"
    />
    <p class="warning" id="input-warning-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Waarschuwing:
      </span>
      Het veld is leeg. Als u berichten met uw eigen naam wilt ontvangen. Vul dan uw voornaam in
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="input-explanation">Voornaam</label>
  <div>
    <input
      id="input-explanation"
      class="explanation"
      aria-describedby="input-explanation-message"
      aria-invalid="true"
    />
    <p class="explanation" id="input-explanation-message">
      <span class="notification-type">
        <span class="icon icon-informative" aria-hidden="true"></span>
        Toelichting:
      </span>
      Vul uw voornaam in zoals deze ook in uw paspoort staat
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="input-confirmation">Input</label>
  <div>
    <input
      id="input-confirmation"
      class="confirmation"
      aria-describedby="input-confirmation-message"
      aria-invalid="true"
    />
    <p class="confirmation" id="input-confirmation-message">
      <span class="notification-type">
        <span class="icon icon-check" aria-hidden="true"></span>
        Bevestiging:
      </span>
      Uw voornaam is succesvol ingevoerd
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="input-system">Voornaam</label>
  <div>
    <input
      id="input-system"
      class="system"
      aria-describedby="input-system-message"
      aria-invalid="true"
    />
    <p class="system" id="input-system-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Systeembericht:
      </span>
      Uw voornaam is niet (meer) bekend bij ons. Vul uw gegevens aan
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

Textarea

error
warning
explanation
confirmation
system

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="voorbeeld-tekstveld-error">Voorbeeld tekstveld</label>
  <div>
    <textarea
      id="voorbeeld-tekstveld-error"
      name="voorbeeld-tekstveld-error"
      class="error"
      aria-describedby="voorbeeld-tekstveld-error-message">
    </textarea>
    <p class="error" id="voorbeeld-tekstveld-error-message">
      <span class="notification-type">
        <span class="icon icon-error" aria-hidden="true"></span>
        Foutmelding:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="voorbeeld-tekstveld-warning">Voorbeeld tekstveld</label>
  <div>
    <textarea
      id="voorbeeld-tekstveld-warning"
      name="voorbeeld-tekstveld-warning"
      class="warning"
      aria-describedby="voorbeeld-tekstveld-warning-message">
    </textarea>
    <p class="warning" id="voorbeeld-tekstveld-warning-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Waarschuwing:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="voorbeeld-tekstveld-explanation">Voorbeeld tekstveld</label>
  <div>
    <textarea
      id="voorbeeld-tekstveld-explanation"
      name="voorbeeld-tekstveld-explanation"
      class="explanation"
      aria-describedby="voorbeeld-tekstveld-explanation-message">
    </textarea>
    <p class="explanation" id="voorbeeld-tekstveld-explanation-message">
      <span class="notification-type">
        <span class="icon icon-informative" aria-hidden="true"></span>
        Toelichting:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="voorbeeld-tekstveld-confirmation">Voorbeeld tekstveld</label>
  <div>
    <textarea
      id="voorbeeld-tekstveld-confirmation"
      name="voorbeeld-tekstveld-confirmation"
      class="confirmation"
      aria-describedby="voorbeeld-tekstveld-confirmation-message">
    </textarea>
    <p class="confirmation" id="voorbeeld-tekstveld-confirmation-message">
      <span class="notification-type">
        <span class="icon icon-check" aria-hidden="true"></span>
        Bevestiging:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="voorbeeld-tekstveld-system">Voorbeeld tekstveld</label>
  <div>
    <textarea
      id="voorbeeld-tekstveld-system"
      name="voorbeeld-tekstveld-system"
      class="system"
      aria-describedby="voorbeeld-tekstveld-system-message">
    </textarea>
    <p class="system" id="voorbeeld-tekstveld-system-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Systeembericht:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <button type="submit">Verzend</button>
</form>

Select

error
warning
explanation
confirmation
system

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="select-error">Selectielijst</label>
  <div>
    <select
      id="select-error"
      name="select"
      class="error"
      aria-describedby="select-error-message"
    >
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
    <p class="error" id="select-error-message">
      <span class="notification-type">
        <span class="icon icon-error" aria-hidden="true"></span>
        Foutmelding:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="select-warning">Selectielijst</label>
  <div>
    <select
      id="select-warning"
      name="select"
      class="warning"
      aria-describedby="select-warning-message"
    >
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
    <p class="warning" id="select-warning-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Waarschuwing:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="select-explanation">Selectielijst</label>
  <div>
    <select
      id="select-explanation"
      name="select"
      class="explanation"
      aria-describedby="select-explanation-message"
    >
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
    <p class="explanation" id="select-explanation-message">
      <span class="notification-type">
        <span class="icon icon-informative" aria-hidden="true"></span>
        Toelichting:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="select-confirmation">Selectielijst</label>
  <div>
    <select
      id="select-confirmation"
      name="select"
      class="confirmation"
      aria-describedby="select-confirmation-message"
    >
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
    <p class="confirmation" id="select-confirmation-message">
      <span class="notification-type">
        <span class="icon icon-check" aria-hidden="true"></span>
        Bevestiging:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <label for="select-system">Selectielijst</label>
  <div>
    <select
      id="select-system"
      name="select"
      class="system"
      aria-describedby="select-system-message"
    >
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
    <p class="system" id="select-system-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Systeembericht:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

Datalist

error
warning
explanation
confirmation
system

HTML-Voorbeeld:

      
 <form action="" method="post">
  <label for="datalist-error">Input</label>
  <div>
    <input
      id="datalist-error"
      class="error"
      list="example-list-error"
      aria-describedby="datalist-error-message"
    />
    <p class="error" id="datalist-error-message">
      <span class="notification-type">
        <span class="icon icon-error" aria-hidden="true"></span>
        Foutmelding:
      </s``pan>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <datalist id="example-list-error">
    <option value="Optie 1"></option>
    <option value="Optie 2"></option>
    <option value="Optie 3"></option>
  </datalist>
</form>

HTML-Voorbeeld:

      
 <form action="" method="post">
  <label for="datalist-warning">Input</label>
  <div>
    <input
      id="datalist-warning"
      class="warning"
      list="example-list-warning"
      aria-describedby="datalist-warning-message"
    />
    <p class="warning" id="datalist-warning-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Waarschuwing:
      </s``pan>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <datalist id="example-list-warning">
    <option value="Optie 1"></option>
    <option value="Optie 2"></option>
    <option value="Optie 3"></option>
  </datalist>
</form>

HTML-Voorbeeld:

      
 <form action="" method="post">
  <label for="datalist-explanation">Input</label>
  <div>
    <input
      id="datalist-explanation"
      class="explanation"
      list="example-list-explanation"
      aria-describedby="datalist-explanation-message"
    />
    <p class="explanation" id="datalist-explanation-message">
      <span class="notification-type">
        <span class="icon icon-informative" aria-hidden="true"></span>
        Toelichting:
      </s``pan>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <datalist id="example-list-explanation">
    <option value="Optie 1"></option>
    <option value="Optie 2"></option>
    <option value="Optie 3"></option>
  </datalist>
</form>

HTML-Voorbeeld:

      
 <form action="" method="post">
  <label for="datalist-confirmation">Input</label>
  <div>
    <input
      id="datalist-confirmation"
      class="confirmation"
      list="example-list-confirmation"
      aria-describedby="datalist-confirmation-message"
    />
    <p class="confirmation" id="datalist-confirmation-message">
      <span class="notification-type">
        <span class="icon icon-check" aria-hidden="true"></span>
        Bevestiging:
      </s``pan>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <datalist id="example-list-confirmation">
    <option value="Optie 1"></option>
    <option value="Optie 2"></option>
    <option value="Optie 3"></option>
  </datalist>
</form>

HTML-Voorbeeld:

      
 <form action="" method="post">
  <label for="datalist-system">Input</label>
  <div>
    <input
      id="datalist-system"
      class="system"
      list="example-list-system"
      aria-describedby="datalist-system-message"
    />
    <p class="system" id="datalist-system-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Systeembericht:
      </s``pan>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <datalist id="example-list-system">
    <option value="Optie 1"></option>
    <option value="Optie 2"></option>
    <option value="Optie 3"></option>
  </datalist>
</form>

Checklist

error
warning
explanation
confirmation
system

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="checkbox-error-message">
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox" />
      <label for="checkbox-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="error" id="checkbox-error-message">
      <span class="notification-type">
        <span class="icon icon-error" aria-hidden="true"></span>
        Foutmelding:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="checkbox-warning-message">
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox" />
      <label for="checkbox-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="warning" id="checkbox-warning-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Waarschuwing:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="checkbox-explanation-message">
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox" />
      <label for="checkbox-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="explanation" id="checkbox-explanation-message">
      <span class="notification-type">
        <span class="icon icon-informative" aria-hidden="true"></span>
        Toelichting:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="checkbox-confirmation-message">
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox" />
      <label for="checkbox-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="confirmation" id="checkbox-confirmation-message">
      <span class="notification-type">
        <span class="icon icon-check" aria-hidden="true"></span>
        Bevestiging:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="checkbox-system-message">
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox" />
      <label for="checkbox-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="system" id="checkbox-system-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Systeembericht:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

Radio button

error
warning
explanation
confirmation
system

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="radio-error-message">
    <div class="radio">
      <input type="radio" id="radio-example-base" name="standaard-radio" />
      <label for="radio-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="error" id="radio-error-message">
      <span class="notification-type">
        <span class="icon icon-error" aria-hidden="true"></span>
        Foutmelding:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="radio-warning-message">
    <div class="radio">
      <input type="radio" id="radio-example-base" name="standaard-radio" />
      <label for="radio-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="warning" id="radio-warning-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Waarschuwing:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="radio-explanation-message">
    <div class="radio">
      <input type="radio" id="radio-example-base" name="standaard-radio" />
      <label for="radio-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="explanation" id="radio-explanation-message">
      <span class="notification-type">
        <span class="icon icon-informative" aria-hidden="true"></span>
        Toelichting:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="radio-confirmation-message">
    <div class="radio">
      <input type="radio" id="radio-example-base" name="standaard-radio" />
      <label for="radio-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="confirmation" id="radio-confirmation-message">
      <span class="notification-type">
        <span class="icon icon-check" aria-hidden="true"></span>
        Bevestiging:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

HTML-Voorbeeld:

      
<form action="" method="post">
  <div aria-describedby="radio-system-message">
    <div class="radio">
      <input type="radio" id="radio-example-base" name="standaard-radio" />
      <label for="radio-example-base">Lorem ipsum dolor sit amet</label>
    </div>
    <p class="system" id="radio-system-message">
      <span class="notification-type">
        <span class="icon icon-warning" aria-hidden="true"></span>
        Systeembericht:
      </span>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</form>

Aandachtspunten

Vertel de gebruiker altijd wat de vervolgstappen zijn die zij kunnen nemen om het probleem op te lossen of om zelf verder te kunnen.

Voeg de class toe met het type melding op het invoerveld om gebruik te maken van visuele feedback direct op het invoerveld. Voorbeeld: `class="error"`.

Voeg voor screenreader gebruikers `aria-invalid="true"` toe aan invoervelden met een error. In de HTML-voorbeelden is dit meegenomen.