Filters

Bij het tonen van grote of complexe datasets kan gebruik gemaakt worden van filters. Filters geven de gebruiker de mogelijkheid om enkel relevante data te zien.

Denk bij het toevoegen van filters aan de verschillende gebruikers-behoeften en -vragen. Deze kunnen per gebruiker en per situatie verschillend zijn maar in veel gevallen kunnen de meest voorkomende vragen geidentificeerd worden. Filters kunnen ingezet worden om deze vragen sneller te beantwoorden.

Beschikbare voorbeelden:

Aandachtspunten:

Voeg een <section> of <div> toe met de class filter voor de correcte weergave.
Optioneel: Voeg een <div> met extra informatie toe, bijvoorbeeld de hoeveelheid beschikbare resultaten.
Optioneel: Voeg de optie tot het in- en uit-klappen van de filters toe.
- Voeg bij de extra information een <button> toe met als tekst "Verberg filters" (of vergelijkbaar). Geef het daarnaast een data-show-filters-label-attribuut met als waarde "Toon filters" (of vergelijkbaar).
- Plaats <script defer src="pad/naar/filters.min.js"></script> in de <head> van het document.
- Het defer attribuut zorgt ervoor dat het script in de achtergrond geladen wordt, zodat het tonen van de pagina niet geblokkeerd wordt.
- Wanneer JavaScript niet beschikbaar is, worden de filters altijd getoont en wordt de <button> verborgen.
- Om de filters standaard te verbergen, verander je de tekst van de button naar "Toon filters" (of vergelijkbaar), gebruik je een bijbehorend data-hide-filters-label (in plaats van data-show-filters-label) en voeg je aria-expanded="false" toe aan de <button>.
Voeg binnen het element een formulier met de beschikbare filteropties toe. Voor meer informatie over zie: Formulieren.
In sommige gevallen kunnen formuliervelden naast elkaar geplaatst worden om het gebruikersgemak te vergroten. Denk bijvoorbeeld aan een filter gebasseerd op een begin- en eind-datum. Voor meer informatie zie: Formulieren, horizontaal uitlijnen invoervelden.

Voorbeelden

Ingevuld voorbeeld

Visueel voorbeeld:

5.254 nieuwsberichten

Filter op datum

Trefwoord

toelichting:Vul hier een trefwoord in waarop u wilt filteren.

Periode

van

tot

toelichting:Vul hier een start- en/of einddatum als volgt in: DD-MM-JJJJ.

Ministerie

Dit veld is verplicht

Html-voorbeeld:

                
<section class="filter">
  <div>
    <p><span>5.254</span> nieuwsberichten</p>
    <button data-show-filters-label="Toon filters">
      Verberg filters
    </button>
  </div>
  <form action="" method="post" class="horizontal-view help">
    <fieldset>
      <legend>Filter op datum</legend>
      <div>
        <label for="keyword">Trefwoord</label>
        <div>
          <input id="keyword" name="keyword" placeholder="Bijvoorbeeld: Volksgezondheid'" type="text">
          <p
            class="explanation"
            data-open-label="Toelichting bij het veld: Trefwoord"
            data-close-label="Sluit toelichting bij het veld: Trefwoord"
          ><span>toelichting:</span>Vul hier een trefwoord in waarop u wilt filteren.</p>
        </div>
      </div>

      <fieldset>
        <legend>Periode</legend>
        <div class="column-2">
          <div>
            <label for="date-range-start">van</label>
            <input id="date-range-start" name="date-range-start" value="DD-MM-JJJJ" type="date">
          </div>

          <div>
            <label for="date-range-end">tot</label>
            <input id="date-range-end" name="date-range-end" value="DD-MM-JJJJ" type="date">
          </div>
        </div>
        <p
          class="explanation"
          data-open-label="Toelichting bij het veld: Periode"
          data-close-label="Sluit toelichting bij het veld: Periode"
        ><span>toelichting:</span>Vul hier een start- en/of einddatum als volgt in: DD-MM-JJJJ.</p>
      </fieldset>

      <div>
        <label for="select">Ministerie</label>
        <div>
          <span class="nota-bene">Dit veld is verplicht</span>
          <select id="select" name="select">
            <option value="Alle ministeries">Alle ministeries</option>
            <option value="Ministerie van Algemene zaken">Ministerie van Algemene zaken</option>
            <option value="Ministerie van Binnenlandse Zaken en Koninkrijksrelaties">Ministerie van Binnenlandse Zaken en Koninkrijksrelaties</option>
          </select>
        </div>
      </div>
    </fieldset>

    <button type="submit">Filter</button>
  </form>
</section>

Leeg voorbeeld

Visueel voorbeeld:

5.254 nieuwsberichten

Html-voorbeeld:

                
<section class="filter">
  <div>
    <p><span>5.254</span> nieuwsberichten</p>
    <button aria-expanded="false" data-hide-filters-label="Verberg filters">
      Toon filters
    </button>
  </div>
  <form action="" method="post">
    <fieldset>
      <legend>Filteropties</legend>
      <!-- Voeg de opties van het filter toe -->
    </fieldset>
  </form>
</section>