Hoe zou je een aangepaste checkbox implementeren…

Er zijn verschillende manieren om dit te implementeren:

Verberg de native input, style de label. Dit is de meest toegankelijke en semantisch correcte manier.
Verberg de native input volledig, gebruik aria- attributen en JavaScript om de staat te beheren. Dit vereist meer zorgvuldigheid met betrekking tot toegankelijkheid.

Implementatie met het verbergen van de native input:

HTML:

// Gebruik een verborgen input en een bijbehorend label.
<input type="checkbox" id="my-checkbox" class="visually-hidden">
<label for="my-checkbox" class="custom-checkbox-label">
    <span class="custom-checkbox-indicator"></span>
    <span class="custom-checkbox-text">Mijn aangepaste checkbox</span>
</label>

CSS:

// Klasse om de native input visueel te verbergen, maar wel toegankelijk voor schermlezers.
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
}

// Styling van het aangepaste label.
.custom-checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

// Styling van de indicator (vierkant) van de checkbox.
.custom-checkbox-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    margin-right: 8px; /* Ruimte vanaf de tekst */
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

// Styling van de indicator in de aangevinkte staat.
.custom-checkbox-label input:checked + .custom-checkbox-indicator {
    background-color: #007bff; /* Kleur bij selectie */
    border-color: #007bff;
    position: relative; /* Voor het positioneren van het vinkje */
}

// Toevoegen van het "vinkje" met pseudo-element :after.
.custom-checkbox-label input:checked + .custom-checkbox-indicator:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

Deze aanpak maakt het mogelijk om het standaard gedrag van het checkbox (checked) te gebruiken, terwijl je volledige vrijheid hebt om de uitstraling aan te passen. visually-hidden zorgt voor toegankelijkheid voor ondersteunende technologieën.

Hoe zou je een aangepaste checkbox implementeren?