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.

Selectielijst - select

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Voeg de <range> toe. Zie onderstaand voorbeeld voor meer informatie.

Aandachtspunten:

  • Als een selectielijst een verplicht invoerveld is, voeg dan altijd als eerste optie een lege optie toe: <option value="">--Please choose an option--</option> Zie Verplichte selectielijst voor meer informatie.

Voorbeelden

Basis

Visueel voorbeeld:

HTML-voorbeeld:

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

Horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

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

Verplicht

Voorbeeld

Visueel voorbeeld:

Dit veld is verplicht

HTML-voorbeeld:

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

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-select";

Instelbare variabelen

Bijbehorende elementen: