Components
Checkboxes
Our checkboxes aim at the sweet spot between accessibility and elegance. We want them to feel natural and easy to use for all users.
Quick look
A couple things to keep in mind when using checkboxes:
- When grouped, checkboxes will naturally know how much distance then need above and below.
- Checkboxes should only be used when a user can select one or more options. For mutual exclusion use radio buttons.
Try it out
Food you like (check all that apply)
Corn
Artichokes
Hummus
Mangos
Code samples
- HTML
- PUG
<div class="dqpl-checkbox-wrap dqpl-flexr">
<div class="dqpl-checkbox" role="checkbox" tabindex="0" aria-labelledby="foo"></div>
<div class="dqpl-label" id="foo">Foo</div>
</div>
<div class="dqpl-checkbox-wrap dqpl-flexr">
<div class="dqpl-checkbox" role="checkbox" tabindex="0" data-label-id="bar"></div>
<div class="dqpl-label" id="bar">Bar</div>
</div>
<div class="dqpl-checkbox-wrap dqpl-flexr">
<div class="dqpl-checkbox" role="checkbox" tabindex="0" data-label-id="baz" aria-disabled="true"></div>
<div class="dqpl-label" id="baz">Baz (disabled)</div>
</div>
For more information on implementation read thewiki.