checkboxes

Harris Schneiderman edited this page Jun 9, 2017 · 2 revisions

Checkboxes

What is needed?

The pattern library's checkboxes are not native checkbox elements (<input type="checkbox" />). They are actually custom checkboxes utilizing the "checkbox" role. There are a number of requirements to use the pattern library custom checkboxes. Each checkbox must include the following:

  • A wrapper element with the class "dqpl-checkbox-wrap"
  • An child element with the class "dqpl-checkbox" which must also include the following attributes:
    • role="checkbox"
    • tabindex="0"
    • an accessible name (aria-label, aria-labelledby etc..)
  • A child labelling element with class "dqpl-label" or "dqpl-label-inline". You must ensure that this label is properly associated with the "dqpl-checkbox" element (either aria-label or aria-labelledby).

NOTE: To make the custom checkboxes behave identically to their native counterparts, the javascript will attach a click listener to the label element which will focus the checkbox control. This is done by simply having that "dqpl-label" element within the same "dqpl-checkbox-wrap" element as the "dqpl-checkbox". If for some reason the implementation needs to follow a different convention, you can use the "data-label-id" attribute to tell the script what your label is.

Enabling/Disabling

Triggering the "dqpl:checkbox:disable" and "dqpl:checkbox:enable" events on the checkbox elements will enable or disable the checkboxes and their labels...

var myCheckbox = document.querySelector('.dqpl-checkbox');
var e = new Event('dqpl:checkbox:disable');
myCheckbox.dispatchEvent(e); // disable the checkbox

Example HTML

<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>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.