radio buttons

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

Radio Buttons

What is needed?

The pattern library's radio buttons are not native radio buttons (<input type="radio" />) but rather custom implementations of radio buttons (using role="radio"). It is expected that labelling is handled. Each radio group MUST be within an element with role="radiogroup" and the "dqpl-radio-group" class. Each radio button must include the following:

  • A wrapping element with the class "dqpl-radio-wrap"
  • A child element with the "dqpl-radio" wrap as well as role="radio"
  • A child label element with the "dqpl-label" or "dqpl-label-inline" class.

NOTE: To make the custom radios behave identically to their native counterparts, the javascript will attach a click listener to the label element which will focus the radio control. This is done by simply having that "dqpl-label" element within the same "dqpl-radio-wrap" element as the "dqpl-radio". 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:radio:disable" and "dqpl:radio:enable" events on the radio elements will enable or disable the radios and their labels...

var myRadio = document.querySelector('.dqpl-radio');
var e = new Event('dqpl:radio:disable');
myRadio.dispatchEvent(e);

Example HTML

<div class="dqpl-radio-group" role="radiogroup" aria-labelledby="pizza">
  <h4 id="pizza">Do you link pizza?</h4>
  <div class="dqpl-radio-wrap dqpl-flexr">
    <div class="dqpl-radio" role="radio" aria-labelledby="yes"></div>
    <div class="dqpl-label" id="yes">Yes</div>
  </div>
  <div class="dqpl-radio-wrap dqpl-flexr">
    <div class="dqpl-radio" role="radio" aria-labelledby="no"></div>
    <div class="dqpl-label" id="no">No</div>
  </div>
  <div class="dqpl-radio-wrap dqpl-flexr">
    <!-- Disabled radio-->
    <div class="dqpl-radio" role="radio" aria-disabled="true" aria-labelledby="tuesdays"></div>
    <div class="dqpl-label dqpl-label-disabled" id="tuesdays">Only on tuesdays</div>
  </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.