Invoerveld

Introductie

Invoervelden worden gebruikt om korte stukjes informatie van de gebruiker te vragen, zoals naam, adres of telefoonnummer.

Snelstart

SCSS importeren:

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

Voorbeelden

Voorbeeld: Basis

    
    <form action="" method="post">
  <label for="example-input-base">Voorbeeld invoerveld</label>
  <input id="example-input-base" name="example-input-base" type="text" />
  <button type="submit">Verzend</button>
</form>

Voorbeeld: Verplicht invoerveld

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

Geef op de `input` aan dat het invoerveld verplicht is met het `required` attribuut.

Voeg een span toe boven het invoerveld. 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.

Groeppeer de `input` en de `span` samen in een `div` binnen horizontaal uitgelijnde formulieren.

Voorbeeld: Invoerveld uitgeschakeld

    
    <form action="" method="post">
  <label for="example-input-disabled">Gebruikersnaam</label>
  <input id="example-input-disabled" name="example-input-disabled" type="text" disabled />
  <button type="submit">Verzend</button>
</form>

Aandachtspunten Geef op de `input` aan dat het invoerveld uitgeschakeld is met het `disabled` attribuut.