Mozilla Protocol
  • 19.1.0

Radio Buttons

Radio buttons represent a set of options where only one may be selected.

See the Choices component for custom styled radio buttons.

Tips

  • Wrap the <label> element around both the control and its text label. This offers a bigger target for clicking.
  • Use the mzp-u-inline class to override the base block-level label styling.
<label for="radio-1" class="mzp-u-inline">
    <input type="radio" name="radios" id="radio-1"> Option 1
</label>
<label for="radio-2" class="mzp-u-inline">
    <input type="radio" name="radios" id="radio-2"> Option 2
</label>