HTMLhulp.nl logo
Radio buttons en checkboxes correct gebruiken in HTML

Radio buttons en checkboxes correct gebruiken in HTML

Radio buttons en checkboxes correct gebruiken in HTML

Bij het bouwen van formulieren kom je vaak voor de keuze te staan: moet de gebruiker één optie selecteren of meerdere? Daarvoor bestaan in HTML twee specifieke elementen: radio buttons en checkboxes. Ze lijken op elkaar, maar hebben verschillende functies. In dit artikel leer je wat de verschillen zijn, hoe je ze correct gebruikt, hoe je ze toegankelijk maakt en hoe je ze kunt stylen.

Wat zijn radio buttons?

Radio buttons zijn keuzerondjes waarmee de gebruiker één optie uit een groep kan selecteren. Zodra je een keuze maakt, wordt een eerdere keuze automatisch opgeheven.

Voorbeeld:

<form>
<p>Kies je favoriete kleur:</p>
<input type="radio" id="rood" name="kleur" value="rood">
<label for="rood">Rood</label>

<input type="radio" id="blauw" name="kleur" value="blauw">
<label for="blauw">Blauw</label>

<input type="radio" id="groen" name="kleur" value="groen">
<label for="groen">Groen</label>
</form>

Hier hoort elke optie bij dezelfde groep, omdat het name="kleur"-attribuut gelijk is.

Wat zijn checkboxes?

Checkboxes zijn vakjes waarmee de gebruiker meerdere opties tegelijk kan selecteren.

Voorbeeld:

<form>
<p>Kies je hobby’s:</p>
<input type="checkbox" id="lezen" name="hobby" value="lezen">
<label for="lezen">Lezen</label>

<input type="checkbox" id="fietsen" name="hobby" value="fietsen">
<label for="fietsen">Fietsen</label>

<input type="checkbox" id="muziek" name="hobby" value="muziek">
<label for="muziek">Muziek</label>
</form>

De gebruiker kan één, meerdere of zelfs geen opties aanvinken.

Wanneer gebruik je wat?

  • Radio buttons: als er slechts één keuze mogelijk is. Bijvoorbeeld geslacht, ja/nee-vraag, verzendmethode.

  • Checkboxes: als er meerdere keuzes mogelijk zijn. Bijvoorbeeld interesses, nieuwsbriefopties, filteropties in een webshop.

Labels koppelen aan inputs

Zonder label weet een schermlezer niet wat een optie betekent. Daarom koppel je elk inputveld aan een label met for en id.

<input type="checkbox" id="accept" name="voorwaarden">
<label for="accept">Ik ga akkoord met de voorwaarden</label>

Dit maakt de checkbox klikbaar via het label en helpt ook gebruikers met motorische beperkingen.

Groeperen met <fieldset> en <legend>

Als je meerdere radio buttons of checkboxes hebt die samen één vraag vormen, groepeer ze dan met <fieldset> en een beschrijvende <legend>.

<fieldset>
<legend>Kies je verzendmethode</legend>

<input type="radio" id="standaard" name="verzending" value="standaard">
<label for="standaard">Standaard (3-5 werkdagen)</label>

<input type="radio" id="express" name="verzending" value="express">
<label for="express">Express (1-2 werkdagen)</label>
</fieldset>

Een screenreader leest: “Kies je verzendmethode. Groep met 2 opties.”

Defaultwaarden instellen

Soms wil je dat er al een keuze is gemaakt. Dit doe je met het attribuut checked.

<input type="radio" id="standaard" name="verzending" value="standaard" checked>

Voor checkboxes geldt hetzelfde.

Toegankelijkheid verbeteren met ARIA

In de meeste gevallen zijn radio buttons en checkboxes standaard goed toegankelijk. Bij custom styling kan dit anders zijn. Gebruik dan ARIA-attributen zoals role="checkbox" of aria-checked, maar alleen als je zelf een custom element bouwt.

Voorbeeld custom checkbox:

<div role="checkbox" aria-checked="false" tabindex="0">Nieuwsbrief ontvangen</div>

Let op: dit vereist extra JavaScript om toetsenbordbediening correct te regelen. Waar mogelijk is de native <input> beter.

Styling van radio buttons en checkboxes

Browsers tonen standaard eenvoudige rondjes en vakjes. Vaak wil je ze mooier maken.

Voorbeeld met CSS

input[type="checkbox"], input[type="radio"] {
accent-color: #00bf63;
}

Met accent-color (ondersteund in moderne browsers) pas je de kleur eenvoudig aan.

Custom styling

Met appearance: none kun je zelf een vorm tekenen:

input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #00bf63;
border-radius: 4px;
display: inline-block;
position: relative;
}

input[type="checkbox"]:checked::after {
content: "✔";
position: absolute;
left: 2px;
top: -2px;
font-size: 18px;
color: #00bf63;
}

Foutmeldingen en validatie

Zorg dat je foutmeldingen koppelt aan inputs.

<fieldset>
<legend>Kies minimaal één optie</legend>
<input type="checkbox" id="optie1" name="opties" value="1">
<label for="optie1">Optie 1</label>

<input type="checkbox" id="optie2" name="opties" value="2">
<label for="optie2">Optie 2</label>

<span id="error-opties" class="error">Je moet minimaal één optie selecteren.</span>
</fieldset>

Voeg indien nodig aria-describedby="error-opties" toe om de foutmelding te koppelen.

Toetsenbordnavigatie

Radio buttons en checkboxes moeten altijd met het toetsenbord te bedienen zijn.

  • Tab: springt tussen velden.

  • Spatie: selecteert of deselecteert een checkbox of radio button.

  • Pijltjestoetsen: bewegen vaak tussen radio-opties.

Praktisch voorbeeld: enquêteformulier

<form>
<fieldset>
<legend>Welke onderwerpen vind je interessant?</legend>
<input type="checkbox" id="html" name="onderwerp" value="html">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="onderwerp" value="css">
<label for="css">CSS</label>

<input type="checkbox" id="js" name="onderwerp" value="js">
<label for="js">JavaScript</label>
</fieldset>

<fieldset>
<legend>Hoe vaak wil je een nieuwsbrief ontvangen?</legend>
<input type="radio" id="wekelijks" name="frequentie" value="wekelijks">
<label for="wekelijks">Wekelijks</label>

<input type="radio" id="maandelijks" name="frequentie" value="maandelijks">
<label for="maandelijks">Maandelijks</label>
</fieldset>

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

Met duidelijke labels, fieldsets en legend-elementen is dit formulier zowel toegankelijk als overzichtelijk.

Veelgemaakte fouten bij radio buttons en checkboxes

  1. Geen label gebruiken, waardoor opties onduidelijk zijn.

  2. Alle radio buttons verschillende name-waarden geven, waardoor meerdere selecties tegelijk mogelijk zijn.

  3. Checkboxes gebruiken waar eigenlijk radio buttons nodig zijn (of andersom).

  4. Custom checkboxes maken zonder toetsenbord- of screenreader-ondersteuning.

  5. Geen foutmeldingen tonen of koppelen aan de inputs.

Tips voor betere radio buttons en checkboxes

  • Gebruik altijd <label> voor duidelijkheid en klikbaarheid.

  • Groepeer gerelateerde opties met <fieldset> en <legend>.

  • Houd de keuzes kort en eenduidig.

  • Test met toetsenbord en schermlezers.

  • Style ze consistent met accent-color of custom CSS.

Radio buttons en checkboxes lijken misschien eenvoudige invoerelementen, maar hun correcte gebruik maakt een enorm verschil in gebruiksvriendelijkheid en toegankelijkheid.