Aan/uit-schuifknop

De schuifknop kan gebruikt worden voor het aan of uit zetten van elementen. Bijvoorbeeld voor het aan of uit zetten van meldingen.

Aandachtspunten:

Gebruik de aan/uit-schuifknop in situaties waarbij gekozen kan worden tussen een aan en uit status. Let op: Voeg geen keuze-opties toe waarbij het niet duidelijk is wat "aan" of "uit" betekend. Niet alle hulptechnologiën lezen de inhoud van de schuifknop voor wat verwarring bij gebruikers kan zorgen.

Schuifknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                
<fieldset>
  <legend>Voorbeeld aan/uit schuifknop</legend>
  <div class="toggle-switch">
    <label>
      <span>Save my preferences</span>
      <span class="checkbox">
        <input type="checkbox" id="switch-1">
        <span class="false">Off</span>
        <span class="true">On</span>
      </span>
    </label>
  </div>
</fieldset>

Gegroepeerde schuifknoppen

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                
<form method="post">
  <fieldset>
    <legend>Toggle switch</legend>

    <div class="toggle-switch">
      <label>
        <span>Toon filters</span>
        <span class="checkbox">
          <input type="checkbox" id="switch-2">
          <span class="false">Uit</span>
          <span class="true">Aan</span>
        </span>
      </label>
    </div>

    <div class="toggle-switch">
      <label>
        <span>Gevaccineerd</span>
        <span class="checkbox">
          <input type="checkbox" id="switch-3">
          <span class="false">Nee</span>
          <span class="true">Ja</span>
        </span>
      </label>
    </div>

    <div class="toggle-switch">
      <label>
        <span>Vaccinatiestatus</span>
        <span class="checkbox">
          <input type="checkbox" id="switch-4">
          <span class="false">Ongevaccineerd</span>
          <span class="true">Gevaccineerd</span>
        </span>
      </label>
    </div>
  </fieldset>
</form>