Radio buttons

Our radio buttons 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 radio buttons:

  1. When grouped, radio buttons will naturally know how much distance then need above and below.
  2. Radio buttons should only be used when a user can select one option. For multiple selections, use checkboxes.

Try it out

Do you like pizza?

Only on tuesdays

Code samples

<div class="food 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 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 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>

For more information on implementation read thewiki.