Forms

Custom Checkboxes and Radio Buttons

These are available with special code that needs to be precisely used. The code is the same for checkboxes or radio buttons, the display changes based on the type on the input.

<form class="mzp-c-form">
  <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">Checkbox</label>

    </div>

    <div class="mzp-c-choice ">
      <input class="mzp-c-choice-control" type="radio"
       name="Custom Checkboxes and Radio Buttons"
       id="s-radio-1" value="">
      <label class="mzp-c-choice-label "
       for="s-radio-1">Radio Button</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.