Componenten

Checkbox

Checkboxes worden voornamelijk gebruikt wanneer de gebruiker één of meerdere vooraf bepaalde antwoordopties mag selecteren. Er zijn ook varianten waarmee de gebruiker één antwoordoptie heeft.

Checkbox-groep

Een checkbox-groep wordt gebruikt bij vragen waarop meerdere standaard antwoorden van toepassing kunnen zijn. Wanneer uit de vraagstelling niet duidelijk is dat meerdere antwoorden gekozen mogen worden, maak dit dan expliciet door in de vraagstelling '(meerdere antwoorden mogelijk)' toe te voegen.

Toegankelijkheid

  • Er wordt geen gebruik gemaakt van een legend in verband met de verplichting in bootstrap om deze te nesten binnen een div, waardoor er ongeldige HTML ontstaat.
  • Hierom wordt er een element gebruikt dat als label voor de fieldset dient en gekoppeld wordt met aria-labelledby.
  • Het element met daarin de antwoordopties heeft het attribuut role="group".

Voorbeeld

Meerdere kolommen

Het is mogelijk om de checkboxes weer te geven in meerdere kolommen waarbij de antwoorden per kolom getoond worden van boven naar beneden. Let hierbij op het volgende:

  • De scanbaarheid van de antwoordopties neemt vaak af wanneer je meerdere kolommen gebruikt. Gebruik het alleen als het echt nodig is om ruimte te besparen.
  • Zorg er voor dat de antwoordopties zo gesorteerd zijn dat de weergave in kolommen nog logisch is. Bij kolommen is dit bijna altijd alfabetisch en bijvoorbeeld niet op volgorde van meest gekozen antwoorden.
  • Het aantal kolommen dat je kiest is ook afhankelijk van de lengte van de antwoordopties.
  • Om twee kolommen te tonen vanaf md gebruik je bijvoorbeeld checkbox-columns-md-2. Het hoogste aantal kolommen is 4. Je kunt meerdere classes toevoegen om het gedrag bij de sm, md en lg breakpoints te beïnvloeden.
  • De classes zijn responsive. Op resoluties kleiner dan het sm breakpoint worden de antwoorden altijd in 1 kolom getoond.

Voorbeeld meerdere kolommen

Losstaande checkbox

Het is ook mogelijk om een checkbox te gebruiken wanneer er maar één antwoordoptie is. Dit komt bijvoorbeeld voor wanneer er midden in een aanvraag toestemming moet worden gegeven om bepaalde gegevens op te vragen.

Voor het gebruik van de checkbox in een uitgebreide verklaring waarbij er een grote vraagstelling is is het beter om het hiervoor ontwikkelde verklaring component te gebruiken.