Verplichte velden

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. Indien het formulier horizontaal uitgelijnd is: groeppeer de <input> en de <span> samen in een <div>. Voor meer informatie zie Horizontaal uitgelijnd formulier.

Voorbeelden

Invoerveld verplicht

Visueel voorbeeld:

Dit veld is verplicht

HTML-voorbeeld:

<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>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

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

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.

Bijbehorende elementen: