default

Checkboxes - Default

required

Een verplichte keuze wordt in de markup aangegeven met .dso-required op de .form-group.dso-checkboxes

Checkboxes hebben (net zoals radio's) een fieldset.form-group als root element, geen div.form-group

Checkboxes - Required

invalid

Indien een checkbox groep ongeldig is, dient er .dso-invalid op de .form-group.dso-checkboxes geplaatst te worden

Checkboxes - Invalid

Maak een keuze


valid

Een ongeldige checkbox-group welke geldig is gemaakt, dient de .dso-invalid class vervangen te worden door .dso-valid

Checkboxes - Valid

Selecteer alle even getallen


Disabled

Alle input[type="checkbox"] moeten een disabled attribuut krijgen.

Checkboxes - Disabled

Toelichting uitgeklapt

Een checkbox fieldset kan op twee plekken een info button krijgen. Naast de de vraag en per optie. Als een toelichting is opengeklapt moet er .dso-open op de toelichting button geplaatst worden.

Checkboxes - Default

Toelichting bij vraag: "Maak een keuze"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.

Toelichting bij antwoord: "twee"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.


Vaste toelichting

Een checkbox fieldset kan ook een vaste toelichting krijgen, naast de de vraag en per optie. Als een toelichting is opengeklapt moet er .dso-open op de toelichting button geplaatst worden.

Checkboxes - Default

Toelichting bij vraag: "Maak een keuze"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.

Toelichting bij antwoord: "twee"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.


nested

Checkboxes - Nested
  • Toelichting bij antwoord: "Optie op niveau 1 - keuze 1"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.


Alle meldingen

Naar de meldingen wordt verwezen met een aria-describedby attribuut vanuit de fieldset.

Checkboxes - Alle meldingen

Toelichting bij vraag: "Maak een keuze"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.

Maak een keuze

Selecteer alle even getallen