radio buttons

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>