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

Switch 

<label class="check-switch" for="switch_1">
    Switch 1:
    <span class="switch-true">Ja</span>
    <input id="switch_1" data-check-switch="" role="switch" type="checkbox" aria-checked="false">
    <span class="switch-toggle" aria-hidden="true"></span>
    <span class="switch-false">Nee</span>
</label>

<label class="check-switch" for="switch_2">
    Switch 2:
    <span class="switch-true">Ja</span>
    <input id="switch_2" data-check-switch="" role="switch" type="checkbox" aria-checked="false">
    <span class="switch-toggle" aria-hidden="true"></span>
    <span class="switch-false">Nee</span>
</label>

Select

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

Notes

  • The given label text should be descriptive enough for users using screen readers to understand what ticked/unticked (true/false) means.