Mozilla Protocol
  • 19.1.0

Choices

A “choice” is either a checkbox or radio button that recieves custom styling when it appears within an mzp-c-choices container.

  • Use mzp-c-choice-control for both checkboxes and radio buttons.
  • Choices stack by default. Use mzp-l-choices-inline for inline choices.
  • The input must come before the label in source order. We usually encourage wrapping the label around both the control and the label text, but the elements need to be separate to achieve the custom control styling.
<div class="mzp-c-choices">

    <div class="mzp-c-choice">
        <input class="mzp-c-choice-control" type="checkbox" name="checkbox" id="checkbox-1" value="1">
        <label class="mzp-c-choice-label" for="checkbox-1">Option 1</label>
    </div>

    <div class="mzp-c-choice">
        <input class="mzp-c-choice-control" type="checkbox" name="checkbox" id="checkbox-2" value="2">
        <label class="mzp-c-choice-label" for="checkbox-2">Option 2</label>
    </div>

</div>

<div class="mzp-c-choices mzp-l-choices-inline">

    <div class="mzp-c-choice">
        <input class="mzp-c-choice-control" type="radio" name="radio" id="radio-1" value="1">
        <label class="mzp-c-choice-label" for="radio-1">Option 1</label>
    </div>

    <div class="mzp-c-choice">
        <input class="mzp-c-choice-control" type="radio" name="radio" id="radio-2" value="2">
        <label class="mzp-c-choice-label" for="radio-2">Option 2</label>
    </div>

</div>