Selectielijst

Introductie

Een selectielijst toont gebruikers een overzicht van beschikbare opties waaruit ze één (of meerdere) keuze(s) kunnen maken. Dit is handig om invoer te standaardiseren en fouten te verminderen bij het selecteren van vooraf gedefinieerde waarden.

Snelstart

SCSS importeren:

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

Waarschuwing Het `select`-element wordt binnen browsers en bestuurssystemen verschillend weergegeven. Hierdoor kan aangepaste styling onverwachte resultaten opleveren. Test daarom altijd grondig of gebruik de standaard weergave zonder visuele aanpassingen.

Voorbeelden

Voorbeeld: Basis

Selectielijst Optie 1Optie 2Optie 3 Verzend

    
      
    
    <form action="" method="post">
  <label for="select-base">Selectielijst</label>
  <select id="select-base" name="select-base">
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="3">Optie 3</option>
  </select>

  <button type="submit">Verzend</button>
</form>
  

Voorbeeld: Horizontaal uitgelijnd

Selectielijst Optie 1Optie 2Optie 3

Verzend

    
      
    
    <form action="" method="post">
  <div>
    <label for="select-horizontal">Selectielijst</label>
    <select id="select-horizontal" name="select-horizontal">
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
  </div>

  <button type="submit">Verzend</button>
</form>
  

Voorbeeld: Verplichte selectielijst

Verplichte selectielijst Dit veld is verplicht --Please choose an option--Optie 1Optie 2Optie 3 Verzend

    
      
    
    <form action="" method="post">
  <label for="select-required">Verplichte selectielijst</label>
  <span class="nota-bene">Dit veld is verplicht</span>
  <select id="select-required" name="select-required" required>
    <option value="">--Please choose an option--</option>
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="3">Optie 3</option>
  </select>

  <button type="submit">Verzend</button>
</form>
  

Aandachtspunten Het `select`-element wordt binnen browsers en Als een selectielijst een verplicht invoerveld is, voeg dan altijd als eerste optie een lege optie toe: --Please choose an option--