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:

  1. When grouped, checkboxes will naturally know how much distance then need above and below.
  2. 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

<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.