Forms

Custom Checkboxes and Radio Buttons

These are available with special code that needs to be precicely used.

Choices (in this case checkboxes)
Inline Choices (in this case radio buttons)

With a place for more information about these choices.

Disabled
<form class="mzp-c-form">
  <fieldset class="mzp-c-field-set">
    <legend class="mzp-c-field-label">Choices
      <span class="mzp-c-fieldnote">(in this case checkboxes)</span>
    </legend>
    <div class="mzp-c-choices">
      <div class="mzp-c-choice ">
        <input class="mzp-c-choice-control" type="checkbox" name="Custom Checkboxes and Radio Buttons"
         id="s-check-1" value="">
        <label class="mzp-c-choice-label " for="s-check-1">Option 1</label>

      </div>

      <div class="mzp-c-choice ">
        <input class="mzp-c-choice-control" type="checkbox" name="Custom Checkboxes and Radio Buttons"
         id="s-check-2" value="">
        <label class="mzp-c-choice-label " for="s-check-2">Option 2</label>

      </div>

    </div>
  </fieldset>

  <fieldset class="mzp-c-field-set">
    <legend class="mzp-c-field-label">Inline Choices
      <span class="mzp-c-fieldnote">(in this case radio buttons)</span>
    </legend>
    <div class="mzp-c-choices mzp-l-choices-inline">
      <div class="mzp-c-choice ">
        <input class="mzp-c-choice-control" type="radio" name="sic" id="sic-1"
         value="">
        <label class="mzp-c-choice-label " for="sic-1">Option 1</label>

      </div>

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

      </div>

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

      </div>

    </div>
    <p class="mzp-c-field-set-info">With a place for more information about these choices.</p>
  </fieldset>

  <fieldset class="mzp-c-field-set">
    <div class="mzp-c-choice ">
      <input class="mzp-c-choice-control" type="checkbox" name="Custom Checkboxes and Radio Buttons"
       id="s-terms" value="">
      <label class="mzp-c-choice-label " for="s-terms">Single checkbox
        <span class="mzp-c-fieldnote">With a fieldnote</span>
      </label>

    </div>

    <div class="mzp-c-choice mzp-is-error">
      <input class="mzp-c-choice-control" type="checkbox" name="Custom Checkboxes and Radio Buttons"
       id="s-terms2" value="">
      <label class="mzp-c-choice-label " for="s-terms2">Single checkbox
        <span class="mzp-c-fieldnote">With an error message displayed as a field note.</span>
      </label>

    </div>

    <div class="mzp-c-choice ">
      <input class="mzp-c-choice-control" type="checkbox" name="Custom Checkboxes and Radio Buttons"
       id="s-terms3" value="">
      <label class="mzp-c-choice-label  mzp-t-sm" for="s-terms3">Single checkbox with less prominent label</label>

    </div>

    <div class="mzp-c-choice mzp-is-error">
      <input class="mzp-c-choice-control" type="checkbox" name="Custom Checkboxes and Radio Buttons"
       id="s-terms4" value="">
      <label class="mzp-c-choice-label  mzp-t-sm" for="s-terms4">I agree to the <a href="#">privacy policy</a>
        <span class="mzp-c-fieldnote">You must agree to our privacy policy before we can add
          you to the newsletter.</span>
      </label>

    </div>

  </fieldset>

  <fieldset class="mzp-c-field-set">
    <legend class="mzp-c-field-label">Disabled</legend>
    <div class="mzp-c-choices mzp-l-choices-inline">
      <div class="mzp-c-choice ">
        <input class="mzp-c-choice-control" type="radio" name="dis1"
         id="dis-1" value="" disabled>
        <label class="mzp-c-choice-label " for="dis-1">Option 1</label>

      </div>

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

      </div>

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

      </div>

      <div class="mzp-c-choice ">
        <input class="mzp-c-choice-control" type="checkbox" name="dis4"
         id="dis-4" value="" checked disabled>
        <label class="mzp-c-choice-label " for="dis-4">Option 3</label>

      </div>

    </div>
  </fieldset>
</form>

Notes

  • use mzp-c-choice-control for both checkboxes and radio buttons
  • the input must be before the label in source order

Form fields

The field component is a wrapper around a field-label and field-control. It can contain an optional field-info.

<label> and <input> elements inherit some styles without having these classes applied. The classes will ensure the right spacing, especially when using other layout options.

<div class="mzp-c-form">
  <div class="mzp-c-field ">
    <label class="mzp-c-field-label" for="id_name">Label</label>
    <input class="mzp-c-field-control " type="text" id="id_name">

  </div>
  <div class="mzp-c-field mzp-l-stretch">
    <label class="mzp-c-field-label" for="id_name">Label
      <span class="mzp-c-fieldnote">Get a full width input by adding class <code>mzp-l-stretch</code>        to the parent.</span>
    </label>
    <input class="mzp-c-field-control " type="text" id="id_name">

  </div>
  </form>

Tips

  • These layout features are most useful in larger forms. If you have a small form like a login they're optional.

The form header and footer components can be used to put some distance between the form components and their setup and submission content.

<form class="mzp-c-form">
  <div class="mzp-c-form-header">
    <h2 class="mzp-c-form-heading">Heading</h2>
    <p>The heading and this paragraph are inside a form-header.</p>
  </div>
  <fieldset class="mzp-c-field-set">
    <div class="mzp-c-field ">
      <label class="mzp-c-field-label" for="id_name">Label</label>
      <input class="mzp-c-field-control " type="text" id="id_name">

    </div>
    <div class="mzp-c-field ">
      <label class="mzp-c-field-label" for="id_user_email">Label</label>
      <input class="mzp-c-field-control " type="text" id="id_user_email">

      <p class="mzp-c-field-info">Supplementary information about the form fields can be
        included in a field-info.</p>
    </div>
  </fieldset>
  <div class="mzp-c-form-footer">
    <p>This paragraph and the elements below are in a form-footer</p>
    <button class="mzp-c-button">Button</button>
    <p class="mzp-c-form-info mzp-t-xs">The button container component is optional - use it for button
      alignment options if you need them.</p>
  </div>
</form>

Tips

  • These layout features are most useful in larger forms. If you have a small form like a login they're optional.

Field sets

Field sets group form fields that are related thematically. Field sets will often correspond to the fieldset element but not always.

Legend
Legend
<form class="mzp-c-form">
  <fieldset class="mzp-c-field-set">
    <legend class="mzp-c-form-subheading">Legend</legend>
    <div class="mzp-c-field ">
      <label class="mzp-c-field-label" for="one">Label</label>
      <input class="mzp-c-field-control " type="text" id="one">

    </div>
    <div class="mzp-c-field ">
      <label class="mzp-c-field-label" for="two">Label</label>
      <input class="mzp-c-field-control " type="text" id="two">

    </div>
  </fieldset>
  <fieldset class="mzp-c-field-set">
    <legend class="mzp-c-form-subheading">Legend</legend>
    <div class="mzp-c-field ">
      <label class="mzp-c-field-label" for="three">Label</label>
      <input class="mzp-c-field-control " type="text" id="three">

    </div>
    <div class="mzp-c-field ">
      <label class="mzp-c-field-label" for="four">Label</label>
      <input class="mzp-c-field-control " type="text" id="four">

    </div>
  </fieldset>
</form>

Tips

  • if you are using legend elements add the mzp-c-form-subheading class to make them behave as expected.

Button Container

The .mzp-c-button-container class can be used around a group of buttons. It applies a flexbox context and the default form spacing. Modifier classes can then be added to change the layout.

More information.

<form class="mzp-c-form">
  <div class="mzp-c-button-container">

    <button class="mzp-c-button">
      Primary</button>

    <button class="mzp-c-button mzp-t-secondary">
      Secondary</button>

    <p class="mzp-c-button-info">More information.</p>
  </div>
</form>

Notes

  • Buttons are stacked, centered, and full-width on small screens (though with a max-width of 300px).
  • On larger screens, buttons are inline and aligned with the text direction (left in LTR languages, right in RTL languages)
  • Modifier classes for more layout options (See the demo):
    • mzp-l-align-end aligns buttons opposite to the text (right in LTR languages, left in RTL languages).
    • mzp-l-align-center aligns buttons in the center.
    • mzp-l-stretch makes buttons fill the width of the container. Multiple buttons will be stacked and full-width in smaller viewports, and appear inline and stretched in larger viewports (See the demo). This option is best suited to narrow forms.
  • Although the examples here show two buttons, most forms will have only one.
  • The mzp-c-button-info element adds a brief note in small text, typically for some kind of disclaimer or contextual information about the form being submitted. It usually appears below/after the buttons but in some cases could appear above/before.