Nijmegen Component Library
You are viewing version 6.3.2 of the library, the latest version is

Switch 

<label class="check-switch" for="switch_1">
    Ga je akkoord met de voorwaarden?
    <span class="switch-true" aria-hidden="true">Ja</span>
    <input id="switch_1" type="checkbox" role="switch">
    <span class="switch-toggle" aria-hidden="true"></span>
    <span class="switch-false" aria-hidden="true">Nee</span>
</label>

<label class="check-switch" for="switch_2">
    Wil je de nieuwsbrief ontvangen?
    <span class="switch-true" aria-hidden="true">Ja</span>
    <input id="switch_2" type="checkbox" role="switch" checked>
    <span class="switch-toggle" aria-hidden="true"></span>
    <span class="switch-false" aria-hidden="true">Nee</span>
</label>

Select

Based on a11y styled form components:
https://github.com/scottaohara/a11y_styled_form_controls

Notes

  • This component can only be used for yes/no or on/off questions.
  • The given label text should be descriptive enough for users using screen readers to understand what ticked/unticked (true/false) means.